Para quienes esteis familiarizados con CSS o para quienes esteis empezando una de las cosas más simpáticas que ocurren cuando estilizas tu web es la especifidad de los selectores de clase.

Las hojas de estilo permiten la separación de la presentación y los contenidos. Los contenidos -en un documento o página web- se escriben en lenguaje HTML mientras que el estilo -la presentación la representación de ese contenido estructurado- se define en las hojas de estilo CSS.

En la hoja de estilo se escriben reglas que definen esa presentación. Cada regla se compone de dos partes fundamentales: un selector (por ejemplo h1 y una declaración (por ejemplo color: red. A su vez la declaración consta de dos partes la propiedad en este caso color y el valor red. Esta regla quedaría así en una hoja de estilo: h1 { color: red; } y significaría que el h1 se pinta de rojo.

Por qué hablar de la especifidad

Hay distintos tipos de selectores y ahora no vamos a enumerarlos pero sí que debemos saber que los hay de varios tipos y esto supone que podemos seguir varios caminos para crear reglas en las hojas de estilo y por tanto algunas reglas prevalecen sobre otras. Para saber cuál prevalece hemos de calcular su especifidad.

Si controlais inglés podéis leer la página del W3 que lo cuenta. Si me leeis podréis leer también la traducción de este documento por el SIDAR. En cualquier caso la explicación que sigue a continuación interpreta el original en inglés.

El cálculo de la especifidad se realiza interpretando una leyenda compuesta por cuatro reglas que unidas componen un número formado por abcd donde cada letra es el valor de cada una de las reglas. Cuanto mayor es el número mayor especifidad y por tanto mayor prevalencia. Pero veamos las cuatro reglas.

Las cuatro reglas de la especifidad

• Cuentas 1 si en vez de un selector has utilizado el atributo style. Por tanto siempre que utilices style vas a tener un resultado igual o mayor a a=1 b=0 c=0 y d=0. Si unimos estos valores el número resultante es 1000 su valor de especifidad.
• Se cuenta el número de atributos en el selector. Por ejemplo ` #x34y {}` se cuenta como 1. Luego a=0 b=1 c=0 y d=0 da como resultado 100.
• Se cuenta el número de otros atributos y pseudo-clases en el selector. Por ejemplo li.red.level {} cuenta como 2 uno por red y uno por level. Por tanto a=0 b=0 c=2 y d=0 da como resultado 20.
• Se cuenta el número de elementos y pseudo-elementos en el selector. Por ejemplo ul li {} cuenta como dos uno por ul y otro por li. Por tanto a=0 b=0 c=0 y de=2 da como resultado 2.

Conclusiones

Parece claro que si incluimos la regla de la hoja de estilo en el atributo style nos aseguramos una especifidad muy alta. También parece claro que que si utilizamos elementos y pseudo-elementos nuestro valor de especifidad será muy bajo. Normalmente la primera regla no se aplica más que a documentos específicos -páginas webs que dentro de un sitio web contemplan algunas particularidades- y lo habitual será que tengamos que calcular la especifidad con las otras tres reglas.

Igualmente tiene sentido que sean los selectores ID por ser únicos -por tanto que afectan a un elemento- los que tengan mayor especifidad y prevalencia sobre los selectores de clase que son algo así como toda una clase de elementos a los que quiero aplicar esta regla de estilo

En cualquier caso una vez controlado el tema de la especifidad me parece que el mayor problema con las hojas de estilo es el de planificarlas bien y esto supone también una buena estructuración del documento.