Fundamentos de la especificidad en CSS

En esta lección entenderás por qué a veces un estilo «no se aplica» aunque lo hayas escrito bien: casi siempre es cuestión de especificidad.

Cuando varias reglas afectan al mismo elemento, CSS calcula cuál pesa más. El orden de fuerza, de menor a mayor, es: selector de etiqueta (p) < clase (.highlight) < id (#special) < estilo en línea (style="..."). Solo cuando dos reglas empatan en especificidad gana la que aparece más abajo en el archivo.

El código de ejemplo declara los tres niveles a la vez. El primer párrafo sale verde porque la clase gana a la etiqueta; el segundo sale rojo porque el id gana a la clase, aunque la regla del id esté escrita antes.

El antipatrón más extendido es recurrir a !important para forzar que algo se aplique. Funciona, pero a partir de ahí solo otro !important puede sobrescribirlo, y en poco tiempo el CSS se vuelve inmanejable. Es mejor reordenar o ajustar los selectores.

Por eso muchos equipos se imponen la disciplina de maquetar casi todo con clases y reservar los id para anclas y JavaScript: mantener la especificidad plana y previsible es lo que hace que una hoja de estilos grande siga siendo editable.