Camadas em código de terceiros

Frameworks de CSS de terceiros (Bootstrap, Tailwind, Bulma) frequentemente usam seletores com alta especificidade ou !important que entram em conflito com seus próprios estilos. Colocá-los em camadas resolve o problema sem modificar o código-fonte do framework.

Atribua o CSS de terceiros importado a uma camada inicial (de baixa prioridade):

Embora o Bootstrap use seletores com alta especificidade e !important, colocá-lo na camada vendor (declarada primeiro) significa que seus estilos em camadas posteriores sempre vencem — sem que você precise igualar ou superar a especificidade do Bootstrap.

Para links externos de CDN, você não pode usar @import layer. Em vez disso, crie uma estratégia baseada em uma tag <link> copiando o conteúdo da CDN para um bloco de camada local ou usando uma etapa de compilação para envolvê-lo:

Uma folha de estilos injetada por JavaScript (por exemplo, um widget) não pode ser colocada facilmente em uma camada. Porém, você pode substituir seus estilos em um bloco posterior sem camada na sua folha de estilos, que tem prioridade maior do que qualquer camada.

Configuração completa para usar o Bootstrap sem disputas de especificidade:

O próprio Tailwind CSS usa @layer internamente (@layer base, components, utilities). Você pode adicionar o Tailwind a uma camada de fornecedor no nível do projeto, mantendo seus componentes e utilitários em camadas de prioridade mais alta.

Bibliotecas como Open Props (uma biblioteca de propriedades personalizadas do CSS) foram projetadas para serem usadas com @layer. Elas fornecem uma importação de camada para uma integração limpa, sem conflitos de especificidade.

Coloque sua redefinição do CSS na camada de menor prioridade para que ela afete somente os elementos que não foram modificados pelos seus componentes:

Se você distribui uma biblioteca de CSS, documente as camadas que ela usa. Os usuários da sua biblioteca podem colocar suas substituições em um bloco sem camada ou em uma camada declarada posteriormente, que vence suas camadas sem precisar de truques de especificidade.

Ao depurar conflitos de CSS de terceiros, o painel Styles do DevTools mostra a camada de origem de cada regra. Procure anotações como "(camada: vendor)" para identificar estilos de terceiros que precisam ser substituídos.

Por que envolver uma folha de estilos do Bootstrap com alta especificidade em uma @layer inicial permite que seus estilos a substituam sem precisar igualar a especificidade do Bootstrap?

Envolva o CSS de terceiros em camadas iniciais (de baixa prioridade) usando @import layer(). Seus estilos em camadas posteriores substituem automaticamente os estilos de terceiros, independentemente da especificidade. Isso resolve conflitos de integração com frameworks sem modificar o código do fornecedor, igualar uma alta especificidade ou usar !important para substituir frameworks.