CSSLab

Siendo específico

Tweet

Este tema debe ser uno de los artículos griales de CSSLab, y podría aportar en la solución de más de algún problema con el maqueteado CSS. La especificidad es una técnica que debe ser entendida muy a fondo, para que pueda ser abordada sin problemas posteriores, donde lo más común es cuando se escriben estilos para un mismo elemento y el browser no lo despliega como lo estipulamos. En esos momentos, lo más probable (aparte del error de que pueda estar mal escrito) es que haya conflictos de especificidad. Y mientras más grandes los archivos CSS (grandes me refiero a más de 1000 líneas), más difícil es controlar estos conflictos.

Son varias las reglas que implican la especificidad. Comencemos.

1.

Si los selectores son iguales, entonces el último escrito (el de más abajo en el código, ya que el browser lee los archivos de arriba hacia abajo) es el que toma importancia:

p { font-size: 1em; }
p { font-size: 1.5em; }

Entonces <p> tendrá el tamaño de texto de 1.5em. Esto es cuando los selectores son declarados de la misma forma, como en el ejemplo anterior. Vamos con otro:

2.

Para: <ul><li><a href="">Link</a></li></ul>

ul li a { color: #f00 }
a { color: #333 }

Si siguiéramos la misma filosofía, el link de una lista tendría color gris oscuro porque fue declarado después. Pero como hemos sido más específico diciendo que el link en un elemento de una lista (ul li a) es rojo, éste gana predominancia y finalmente se muestra rojo, no gris porque hemos sido más específicos con ello. Básicamente, esta regla dice: mientras más específico el selector, más preferencia tendrá por sobre otros estilos. Existen cálculos creados para ayudar a evitar errores en esto:

Selectores HTML tienen valor 1

p tendrá especificidad 1
(p = 1)

ul li a tendrá especificidad 3
(ul+li+a = 1+1+1 = 3)

Selectores de Class tienen valor 10

.nombreclass tendrá especificidad 10
(.nombreclass = 10)

div p.nombreclass tendrá especificidad 12
(div+p+.nombreclass = 1+1+10)

Selectores de ID tienen valor 100

#nombreid tendrá especificidad 100
(#nombreid = 100)

body #nombreid .nombreclass p tendrá especificidad 112
body+#nombreid+.nombreclass+p = 1+100+10+1 = 112

3.

Selectores universales tienen especificidad 0, tales como * y body

4.

Estilos inline (esos que son dados dentro del mismo HTML mediante el atributo style="") tienen la mayor especificidad de todas.

<p style="color: blue;">Texto en azul</p>

Finalmente, un par de consejos:

• Trata de evitar !important. De eso se trata todo esto, entender cómo funciona para que no tengas que parchar utilizando métodos que causan más problemas de los que soluciona.
• - No te vuelvas loco especificando. Sería insano toparse con:

body div#container div#menu ul li ul.submenu li a

• - Ahorra especificidad no yendo atrás más que 2 o 3 niveles para evitar conflictos, como por ejemplo:

#menu li a

Links:

• Specificity | HTML Dog
• CSS Specificity: Things You Should Know