Capas en código de terceros

Los frameworks de CSS de terceros (Bootstrap, Tailwind, Bulma) suelen usar selectores con una especificidad alta o !important, lo que puede entrar en conflicto con sus propios estilos. Envolverlos en capas resuelve este problema sin modificar el código fuente del framework.

Asigne el CSS de terceros importado a una capa temprana (de baja prioridad):

Aunque Bootstrap usa selectores con una especificidad alta y !important, colocarlo en la capa vendor (declarada en primer lugar) significa que sus estilos de las capas posteriores siempre prevalecerán, sin que tenga que igualar o superar la especificidad de Bootstrap.

En los enlaces externos a CDN no puede usar la capa @import. En su lugar, cree una estrategia basada en una etiqueta <link> copiando el contenido del CDN en un bloque de capa local o usando un paso de compilación para envolverlo:

Una hoja de estilos inyectada por JavaScript (p. ej., la de un widget) no se puede incluir fácilmente en una capa. Sin embargo, puede sobrescribir sus estilos en un bloque posterior sin capa dentro de su hoja de estilos, que tiene mayor prioridad que cualquier capa.

Configuración completa para usar Bootstrap sin conflictos de especificidad:

Tailwind CSS utiliza internamente @layer (@layer base, components, utilities). Puede añadir Tailwind a una capa vendor del proyecto y mantener sus componentes y utilidades en capas de mayor prioridad.

Las bibliotecas como Open Props (una biblioteca de propiedades personalizadas de CSS) están diseñadas para usarse con @layer. Proporcionan una importación de capa para integrarlas limpiamente y sin conflictos de especificidad.

Coloque el restablecimiento de CSS en la capa de menor prioridad para que solo afecte a los elementos que sus componentes no modifican:

Si distribuye una biblioteca de CSS, documente las capas que utiliza. Los usuarios de su biblioteca pueden colocar sus sobrescrituras en un bloque sin capa o en una capa declarada posteriormente, que prevalecerá sobre sus capas sin necesidad de recurrir a trucos de especificidad.

Al depurar conflictos de CSS de terceros, el panel Styles de DevTools muestra la capa de origen de cada regla. Busque las anotaciones "(layer: vendor)" para identificar los estilos de terceros que deben sobrescribirse.

¿Por qué envolver una hoja de estilos de Bootstrap con una especificidad alta en una @layer temprana permite que sus estilos la sobrescriban sin tener que igualar la especificidad de Bootstrap?

Envuelva el CSS de terceros en capas tempranas (de baja prioridad) mediante @import layer(). Sus estilos de las capas posteriores sobrescribirán automáticamente los estilos de terceros, independientemente de la especificidad. Esto resuelve los conflictos de integración con frameworks sin modificar el código del proveedor, igualar una especificidad alta ni usar !important para sobrescribir los frameworks.