Algún día — y ese día llegará — escribirás una regla CSS, la guardarás, recargarás el navegador y... nada. El estilo no aparece. O peor: aparece el estilo equivocado.
No te desesperes. No es un bug del universo. Es la cascada y la especificidad jugando con tus nervios. Entender estos dos conceptos te convertirá de alguien que "lucha contra CSS" a alguien que lo domina.
En una cascada, el agua fluye desde arriba hacia abajo. En CSS ocurre exactamente lo mismo: cuando dos reglas afectan al mismo elemento y tienen el mismo nivel de importancia, gana la que está más abajo.
Dos reglas, mismo selector, se contradicen. ¿Cuál gana? La de abajo. El párrafo será azul. La cascada habló.
Aquí viene el giro inesperado. A veces, aunque una regla esté más abajo en el archivo, no gana — porque la de arriba es más específica.
Mira este ejemplo:
Aunque la regla con p está más abajo, el párrafo será rojo. ¿Por qué? Porque .mi-parrafo es un selector de clase, que es más específico que un selector de etiqueta.
La lógica es simple: cuanto más específico es el selector, mayor es su prioridad. Un selector que dice "este elemento concreto" siempre gana sobre uno que dice "todos los elementos de este tipo".
Lo mismo pasa con los selectores descendientes:
div p es más específico que p solo — está diciendo "los párrafos que están dentro de un div", no simplemente "todos los párrafos". Gana la de arriba aunque vaya primero.
Existe una forma de hacer que una regla gane sobre todas las demás, ignorando cascada y especificidad. Se llama !important y se añade al final de una declaración:
A pesar de que .mi-parrafo es más específico y está más abajo, el !important hace que el rojo gane de todas todas.
Pero aquí va la advertencia seria: no abuses de !important. Rompe el flujo natural de CSS y hace que tu código sea muy difícil de mantener. Si te encuentras usándolo constantemente, probablemente hay algo en tu estructura de selectores que no está bien planteado.
¿Cuándo usarlo con justicia? Cuando estás usando un CSS externo que no controlas — por ejemplo, una librería de terceros — y necesitas sobrescribir sus estilos sin saber su estructura interna.
En el editor, crea una regla para p con fondo red y otra para .mi-parrafo con fondo blue. Verás que la clase gana por especificidad. Si quieres ir un paso más allá, prueba a añadir !important a la regla que pierde y observa cómo cambia el resultado.
El que entiende las reglas puede doblarlas a su favor...