La cascada: origen y orden

La cascada es el algoritmo que usa CSS para determinar qué declaración de estilo gana cuando varias reglas se dirigen a la misma propiedad del mismo elemento. Tiene en cuenta el origen, la importancia, la especificidad y el orden del código fuente.

Las declaraciones CSS proceden de tres orígenes, en orden de prioridad:

1. Hoja de estilos del agente de usuario: valores predeterminados del navegador
2. Hoja de estilos del usuario: estilos personalizados establecidos por los usuarios (accesibilidad)
3. Hoja de estilos del autor: sus archivos CSS

Con declaraciones normales (no importantes), los estilos del autor anulan los estilos del usuario, que a su vez anulan los estilos del agente de usuario. Por eso su CSS prevalece sobre los valores predeterminados del navegador.

Añadir !important invierte el orden de los orígenes para esa declaración:

1. !important del agente de usuario
2. !important del usuario: máxima prioridad (accesibilidad)
3. !important del autor

Por eso las anulaciones de accesibilidad del usuario (por ejemplo, los colores forzados) no pueden ser anuladas por el CSS del autor.

Cuando compiten dos declaraciones del mismo origen, la especificidad determina cuál gana. Gana la especificidad más alta; esto es lo primero que los desarrolladores tienen en cuenta al depurar CSS.

Cuando dos reglas tienen una especificidad idéntica, gana la que aparece más tarde en la hoja de estilos. Esta es la regla del «orden del código fuente». Por eso importa el orden de las declaraciones @import y @keyframe.

Las capas de la cascada de CSS (@layer) introducen un nuevo paso de la cascada entre el origen y la especificidad. El orden de las capas determina la prioridad, y una declaración de una capa posterior gana a otra de una capa anterior, independientemente de su especificidad.

Orden de prioridad completo (de mayor a menor):

1. Origen + importancia (!important del usuario, !important del autor)
2. Valores de animación
3. Capas de CSS (ganan las capas posteriores)
4. Especificidad
5. Orden del código fuente
6. Valores de transición

La herencia es diferente de la cascada. Los valores heredados proceden del estilo calculado del elemento principal. Pierden frente a cualquier valor aplicado directamente, incluso si procede de una regla con baja especificidad.

Coloque los estilos más específicos (las variantes) después de los estilos base en su hoja de estilos. Por eso los archivos de componentes deben importarse después de los archivos de restablecimiento y base.

En el panel Styles de DevTools, las reglas aparecen de mayor a menor prioridad. Las reglas tachadas perdieron en la cascada. Pase el cursor sobre una regla para ver su archivo de origen y el número de línea para depurarla.

Dos reglas se dirigen a la misma propiedad con una especificidad idéntica. ¿Cuál gana?

La cascada resuelve los conflictos de estilos mediante el origen (autor > usuario > navegador), después la importancia (!important invierte el orden), luego el orden de @layer, la especificidad y, por último, el orden del código fuente. Comprender la cascada le permite predecir exactamente qué regla gana en cualquier conflicto, sin tener que adivinar.