Prioridad de las capas e interacción con !important

Para las declaraciones normales (sin !important), la prioridad en la cascada es:

1. Estilos sin capa (prioridad más alta)
2. Última capa declarada
3. Capas anteriores (prioridad más baja)

Para las declaraciones con !important, el orden de prioridad se invierte:

1. !important en estilos sin capa (prioridad más baja del nivel de !important)
2. !important en la primera capa declarada (prioridad más alta)
3. !important en capas posteriores (prioridad más baja)

La inversión refleja cómo funcionan las declaraciones !important del usuario y del autor en la cascada original. La declaración !important del usuario prevalece sobre la del autor para proteger las preferencias de accesibilidad; la misma lógica se extiende a las capas. Con !important, las capas anteriores (más fundamentales) prevalecen.

Demostración de la prioridad normal frente a la prioridad de !important:

Usos aceptables dentro de las capas:

• Capa de restablecimiento/normalización: !important para evitar que cualquier componente sobrescriba restablecimientos esenciales
• Utilidades de accesibilidad: display: none !important para las utilidades que ocultan elementos
• Restablecimiento para reducir el movimiento: animation: none !important

No use nunca !important en las capas de componentes. Esto contradice el propósito de las capas y crea problemas de prioridad difíciles de depurar. Use el orden de las capas para asegurarse de que las utilidades prevalezcan.

!important sin capa tiene la prioridad más baja dentro del nivel de !important. Esto significa que el !important de una capa de restablecimiento prevalece sobre un !important sin capa, un resultado contraintuitivo.

Dentro del origen del autor, las capas ordenan las declaraciones. Sin embargo, !important del agente de usuario y !important del usuario siguen estando por encima de todas las declaraciones del origen del autor (tanto si llevan !important como si no). El orden completo de la cascada sigue siendo:

1. !important del agente de usuario
2. !important del usuario
3. !important del autor (en el orden de las capas: prevalece la primera capa)
4. Declaraciones normales del autor (en el orden de las capas: prevalece la última capa)
5. Declaraciones normales del usuario
6. Declaraciones normales del agente de usuario

Para verificar la prioridad de las capas en su proyecto, escriba intencionadamente reglas en conflicto en distintas capas y compruebe cuál prevalece en DevTools. El panel Styles muestra de qué capa procede la regla ganadora.

Después de adoptar @layer, la especificidad se vuelve menos importante para la mayoría del CSS de los componentes. Puede escribir selectores más sencillos y con menor especificidad, y confiar en el orden de las capas para establecer la prioridad, lo que reduce considerablemente las guerras de especificidad.

Las capas se declaran como @layer reset, components, utilities. Hay una declaración con !important en la capa reset y otra en utilities. ¿Cuál prevalece?

Para las declaraciones normales, prevalece la capa posterior. Para !important, prevalece la primera capa. !important sin capa tiene la prioridad más baja dentro del nivel de !important. Use !important únicamente en capas de restablecimiento y accesibilidad. Con las capas, puede escribir selectores más sencillos y dejar que el orden de las capas gestione la prioridad en lugar de la especificidad.