Si bien las hojas de estilo son algo básico en el trabajo de HTML actual, es muy poca la gente que consigue recordar otras cosas básicas, como los nombres de sus partes y algunos datos útiles, como la especificidad.
Recuerdo haber leído algo acerca de los CSS cuando estaba navegando Cnet.com en algún minuto del año 96-8. Esa primera vez que vi las definiciones y un CSS descrito, no entendí nada. Para ser franco, tampoco entendía mucho el HTML así que la relación entre uno y otro me hacía menos sentido aún y las ventajas de tener la “presentación” separada de la “programación” para mi era sólo una frase retórica.
Durante el año 2001 ya estaba trabajando en una empresa de desarrollo de soluciones de ingeniería, lo que me permitió dedicarme tiempo completo a comprender tanto el HTML como el CSS. Claro, siempre desde el punto de vista de diseñador, que le interesa que las cosas funcionan y poco le importa el cómo. Sin embargo, a medida que ha pasado el tiempo, más interesante se vuelve el cómo y el conocerlo te entrega el poder de manipular las tecnologías a tu antojo. No saberlo, o denegar su importancia sólo te permite quedarte en la vereda del que se admira con un efecto a causa de su espectacularidad, obviando la belleza que implican las soluciones pequeñas que le dan sentido al comprender el sistema.
CSS – Reglas
Los CSS funcionan haciendo declaraciones, las declaraciones son reglas y cada una funciona en base a 2 partes:
- Selector
- Bloque de Declaración
Selector
Especifica a qué elementos del HTML va a dar estilo la regla.
Bloque de Declaración
Especifica el estilo que será aplicado a los elementos que la regla seleccione.
El bloque de declaración contiene una o más declaraciones.
Una declaración está compuesta por el nombre de una propiedad y un valor.
Ej: 
Especificidad
Muchas veces, cuando se hacen las declaraciones de CSS y se está trabajando en una plataforma que no fue desarrollada inicialmente por uno, pasa que revisamos el efecto de nuestro trabajo en el navegador favorito y ¡Sorpresa! No hay nada. Revisamos y revisamos y la declaración está ok, el navegador es el apropiado, etc. Borramos el caché, reiniciamos el navegador. Incluso, reiniciamos el computador (absolutamente ridículo), y nada. ¿Por qué si mi declaración es la apropiada no estoy consiguiendo el efecto deseado?
La respuesta corta, posiblemente un problema de especificidad.
¿Qué?
En una declaración de CSS, la idea de “cascada”, es justamente el hecho de que la declaración hecha al principio, pueda ser complementada por posteriores adiciones o modificaciones a dicha declaración. Es decir, si en la línea 1 de mi hoja de estilo tengo la siguiente declaración:
p { color: red; font-weight: bold; }
Todo los párrafos de la página serán rojos y en negrita. Si en la línea 5 tengo esta declaración:
div p { color: green; font-size: 10px; }
Todos los párrafos de la página serán rojos y en negrita excepto los que vayan dentro de un DIV, que serán verdes, en negrita y tamaño 10 pixeles.
Hasta aquí no hay problema, la cascada funciona perfecto. Pero, qué pasa si la declaración de la línea 1 es:
#rojos p { color: red; font-weight: bold; }
Todos los párrafos serán rojos y en negrita cuando vayan dentro de un elemento con ID=rojos. Si ese ID es el de, para este ejemplo, el BODY, de tal manera que afecta a toda la página, entonces, cuando en la línea 5 coloquemos:
div p { color: green; font-size: 10px; }
Pasará que nuestro resultado será: texto de color rojo, en negrita y cuando vayan dentro de un DIV, será en tamaño 10px, pero ¡ROJOS!
¿Por qué? Especificidad.
A pesar de que según la cascada debería reemplazarse el valor “red” por el de “green”, sólo funciona cuando la especificidad de la declaración tiene valor predominante. En el caso de no ser así, por ser más específica la primera declaración, entonces la segunda es “recesiva”. ¿Cómo? Para entenderlo, los valores de las declaraciones se dan de esta forma:
# > .xxx > tag / ID > CLASE > ELEMENTO
(el ID de un elemento es mayor que la CLASE de un elemento y este a su vez, mayor que el ELEMENTO).
Si en un ID declaro color negro, en una CLASE declaro color verde y al ELEMENTO lo declaro con color azul, existiendo los 3 selectores, el color va a ser siempre NEGRO. Porque el ID predomina por sobre la CLASE y el ELEMENTO.
Para comprenderlo mejor, y poder calcular la especificidad cuando hay múltiples selectores, se usa la siguiente fórmula:
ELEMENTO = 1
CLASE = 10
ID = 100
De esta forma, en nuestro ejemplo del ID “rojos” sobre el párrafo, tenemos:
#rojos p { … }
ID + ELEMENTO = 100+1 = 101 (valor de especificidad)
En nuestro ejemplo comparativo siguiente, tenemos:
div p { … }
ELEMENTO + ELEMENTO = 1+1 = 2 (valor especificidad)
Por lo tanto, aunque nuestra segunda declaración, por selector debería haber pintado de verde todos los párrafos dentro de los DIV, por tener un valor de especificidad menor que la declaración anterior, en el conflicto gana dicha declaración. El conflicto no es en el tamaño ni en las negritas. El conflicto es en el color. La declaración 1 gana con 101 puntos contra 2 de especificidad de la segunda declaración.
Las declaraciones con muchos selectores son más difíciles de modificar cuando se está realizando un proyecto ajeno y cuesta encontrarlas de manera rápida. Por lo general, se descubren cuando se trata de modificar un ELEMENTO y ningún acercamiento parece afectarlo. Lo común es hacer una búsqueda en el CSS y podremos descubrir si existe una especificidad muy alta para algún ELEMENTO.
Ej:
ul li { … } = 2
ul ul li { … } = 3
ul.menu ul ul li { … } = 14
#main ul.menu ul ul li { … } = 114
#main.top ul.menu ul ul li { … } = 124
