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

Redação Developers | Yassutaro TI & Web

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

Mostrar Avaliações de WooCommerce em Todo o Site 17 de março de 2026
Flattening Arrays: Simplify Complex Data Structures 16 de março de 2026
Desenvolva Aplicações com Cairo: Linguagem de… 14 de março de 2026
Python 3.15: Frozendict e Melhorias de Desempenho 13 de março de 2026
Crie Agentes LLM com Segurança e Validade com Pydantic AI 12 de março de 2026

Ver todos os posts →

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