CSS @scope: Uma Alternativa às Convenções de Nomes e Abstrações Pesadas

O CSS @scope é uma regra que permite selecionar elementos em subtrees DOM específicas, alvo de elementos com precisão sem escrever seletores muito específicos que são difíceis de sobrescrever.

Problemas com Convenções de Nomes e Abstrações Pesadas

As convenções de nomes, como a BEM, são uma solução teórica para problemas de estilo e manutenção, mas podem não funcionar como esperado em projetos reais.

Desenvolvedores se Apegam a Ferramentas

Os desenvolvedores se apegam a ferramentas como o Tailwind, que garantem isolamento completo, em vez de lutar contra a guerra de especificidade entre estilos.

Uso Básico do @scope

Para começar, adicione a regra @scope ao seu CSS e insira um seletor raiz para o qual os estilos serão escopados:

@scope () {
  /* Estilos escopados para o  */
}

Exemplo

Se quisermos escopar estilos para um elemento

, pode ser algo assim:

@scope (nav) {
  a { /* Link styles dentro do escopo de nav */ }
  a:active { /* Estilos de link ativo */ }
  a:active::before { /* Estilos de link ativo com pseudo-elemento */ }
  @media (max-width: 768px) {
    a { /* Ajustes responsivos */ }
  }
}

Donut Scoping

O donut scoping é uma prática que envolve criar um escopo com uma fronteira inferior, definindo os pontos de início e fim do escopo.

@scope (nav) to (ul) {
  a {
    font-size: 14px;
  }
}

Mais Benefícios

O @scope pode remover a necessidade de gerenciamento de classes sem recorrer a utilitários ou nomes de classes gerados pelo JavaScript.

Conclusão

O CSS @scope pode reduzir a necessidade de ferramentas complexas e tornar mais fácil e divertido escrever CSS manutenível.

Fonte Original: Smashing Magazine. Curadoria e Insights: Redação YTI&W.

Redação YTI&W-News

Developers | Yassutaro TI & Web

Notícias do universo do Desenvolvimento Web, dicas e tutoriais para Webmasters.

Repartitioning Dinâmico para Cargas de Trabalho de Séries Temporais 9 de junho de 2026
Abstração de Grafos de Alta Performance na Netflix: Arquitetura e Escala 2 de junho de 2026
Cloudflare CASB agora oferece suporte à Claude Compliance API para segurança de IA 26 de maio de 2026
Escalando ArchUnit com Nebula ArchRules na Netflix 25 de maio de 2026
Omarchy: Por que a distribuição de DHH não é o que parece 24 de maio de 2026

Ver todos os posts →

CSS @scope: Uma Alternativa às Convenções de Nomes e Abstrações Pesadas