Especificidad CSS

Cuando múltiples reglas CSS aplican a un mismo elemento, el navegador debe decidir cuál utilizar. Esta decisión se basa en la especificidad: un sistema de prioridades que determina qué regla tiene mayor peso.

¿Qué es la especificidad?

La especificidad es una medida de cuán específica es una regla CSS. El navegador calcula la especificidad de cada regla y utiliza la que tenga el valor más alto. Si dos reglas tienen la misma especificidad, se aplica la que aparece más abajo en la hoja de estilos.

Cálculo de la Especificidad

El coeficiente de especificidad

La especificidad se calcula utilizando un sistema de cuatro niveles, escrito como (a, b, c, d):

1. a: Estilos inline (por ejemplo, style="...").
2. b: Número de selectores de ID.
3. c: Número de clases, atributos y pseudo-clases.
4. d: Número de elementos y pseudo-elementos.

Cuanto mayor sea el valor de un componente, mayor será la especificidad de la regla.

Ejemplos de Especificidad

1. Estilos Inline: Máxima especificidad.

   <div style="color: red;">This text is red.</div>
   

   Especificidad: (1, 0, 0, 0)

2. Selectores de ID:

   #unique { color: blue; }
   

   Especificidad: (0, 1, 0, 0)

3. Clases, Atributos y Pseudo-clases:

   .example, [type="text"], :hover { color: green; 
   

   Especificidad: (0, 0, 1, 0)

4. Elementos y Pseudo-elementos:

   p, ::before { color: orange; }
   

   Especificidad: (0, 0, 0, 1)

Comparando Especificidades

Dado el siguiente CSS:

p { color: black; }                 /* Especificidad: (0, 0, 0, 1) */
.article p { color: gray; }         /* Especificidad: (0, 0, 1, 1) */
#content .article p { color: blue; } /* Especificidad: (0, 1, 1, 1) */

El párrafo dentro de #content será azul porque (0, 1, 1, 1) tiene la mayor especificidad.

El Rol de !important

La declaración !important anula las reglas de especificidad. Obliga a que un estilo se aplique, sin importar otras reglas.

Ejemplo de !important

p {
  color: black !important;
}

#content p {
  color: red;
}

Aunque #content p tiene una especificidad más alta, el !important asegura que todos los <p> sean negros.

Cuándo Usar !important

• Úsalo con moderación. El abuso de !important puede dificultar la depuración de tu CSS.
• Ideal para sobrescribir estilos de terceros o solucionar problemas urgentes.

Herencia vs. Especificidad

Algunas propiedades, como color y font, se heredan automáticamente de los elementos padre, a menos que se sobrescriban. La especificidad afecta solo las reglas declaradas explícitamente, no las heredadas.

Mejores Prácticas

1. Escribe selectores claros y simples:

   • Evita selectores innecesariamente profundos o complejos.

   /* Avoid this */
   div.container > ul > li > a { color: green; }
   
   

2. Organiza tus estilos:

   • Usa clases para la mayoría de los estilos en lugar de IDs.

   .button { background-color: blue; }
   
   

3. Usa !important solo cuando sea necesario:

   • Antes de recurrir a !important, ajusta la especificidad de tus reglas.

Resumen

Recursos Útiles

• MDN: Especificidad
• MDN: !important