Crea tu propia guía de estilo. Que sea única e identificable por los demás.
Orson Welles.
Este artículo sobre la especificidad de CSS cierra el ciclo que comenzamos con el recuento de la historia de CSS y continuamos con una explicación sobre el uso del CSS en diseño y con otro artículo sobre el gran cambio que trajo el CSS al diseño web.
En lo concerniente a este artículo, aquí vamos a explicar qué es la especificidad de CSS y cómo puede calcularse para evitar los problemas habituales cuando dos o más reglas se refieren un mismo elemento. Suena complicado, pero en verdad no lo es una vez que asimilamos los conceptos básicos.
Al terminar el artículo deberías ser capaz de comprender lo que significa la especificidad de CSS y los retos que pueden presentarse cuando hay que diseñar un sitio web. Por lo pronto, empecemos por el principio y hablemos sobre el concepto de la especificidad de CSS.
¿En qué consiste la especificidad de CSS?
El objetivo principal que se persigue al usar CSS en un sitio web es incorporar lo establecido en nuestra guía de estilo para extender el branding del negocio a la web.
No obstante, puede ocurrir que declaremos un comando para lograr que, digamos, cierta parte del sitio tenga un fondo de un color particular. Cuando vemos cómo el navegador muestra el comando, nos damos cuenta de que no se aplica el estilo que queremos. Así que vemos el código para revisarlo y nos damos cuenta que está bien planteado. ¿Qué ocurre aquí? ¿Qué hacer?
Lo más seguro es que haya otro comando que esté sobreescribiendo el estilo que acabamos de plantear. Lo primero que hay que hacer es identificar todos los comandos (estos se conocen como reglas CSS) que afectan al elemento HTML al cual deseamos cambiar el color de fondo.
Luego de una búsqueda exhaustiva, encontramos dos reglas CSS que compiten para ser mostradas por el navegador. ¿Cómo éste determina cuál regla CSS debe aplicar? Según cuán específica sea la regla CSS: mientras más específica sea, más seguro es que el navegador muestre ese estilo. Bien aquí, pero ¿qué es esta especificidad de CSS entonces?
Como tal vez hayas intuido, la especificidad CSS es el medio a través del cual los navegadores deciden qué estilo mostrar para cada elemento HTML. Entender cómo funciona la especificidad es fundamental para resolver los problemas que surjan a la hora de programar los estilos del sitio web.
A pesar de lo que acabamos de decir, la especificidad no es el único criterio que siguen los navegadores. También está el orden en que se declaran las reglas CSS en la hoja de estilos y la importancia que tengan. Nosotros nos vamos a enfocar en la especificidad. Pero, aún así, diremos algo sobre el orden y la importancia.
En cuanto al orden, suponiendo dos reglas de igual especificidad e importancia, el navegador mostrará la última regla declarada. Por ejemplo:
En consonancia con lo que acabamos de decir, se aplicará el último estilo declarado.
Ahora, la importancia tiene que ver con una propiedad de CSS de la cual hablaremos más adelante cuando nos metamos con el cálculo de la especificidad de CSS
Pasos para calcular la especificidad de CSS
Tener una forma de calcular la especificidad nos permite identificar qué estilos mostrará el navegador y nos ayuda a comprender las decisiones que éste toma para ejecutar una regla sobre otra.
Dicho esto, vamos con los pasos:
- Identifica las reglas CSS que afectan al elemento sobre el cual deseas aplicar el estilo.
- Pondera cada selector según la función que cumpla dentro de la hoja de estilo. En general, podemos agruparlos así:
- Estilos aplicados directamente en HTML: asigna 1000 puntos a estos estilos.
- IDs: Estos selectores son únicos; por eso, son muy específicos. Por cada ID habría que añadir 100 puntos.
- Clases, pseudo-clases, atributos: estos tres selectores permiten agrupar varios elementos HTML a los que se desee darles estilo con una sola regla CSS. En vista de que es menos específico que los IDs, hay que asignarles 10 puntos.
- Elementos y pseudo-elementos: Se refiere a los elementos HTML y a comandos relacionados con la posición del elemento o interacciones del usuario con el elemento al que queremos darle estilo, como en el caso de :hover.
- Compara los resultados. De esta manera, puedes determinar cuál regla CSS tiene mayor especificidad.
Notas adicionales
Los puntos que hemos mencionado no son números dentro del sistema decimal sino que siguen la siguiente notación:
- Para los estilos declarados en HTML – 1,0,0,0
- Para los IDs – 0,1,0,0
- Paras las clases, pseudo-clases y atributos – 0,0,1,0
- Para los elementos y pseudo-elementos – 0,0,0,1
Sin un estilo tiene un ID y una clases, su especificidad será 0,1,1,0 porque adquiere 0,1,0,0 del ID y 0,0,1,0 por la clase.
Hay ciertos selectores que, por ser muy genéricos, se les asigna una especificidad de 0,0,0,0. Este es el caso de:
- La etiqueta html
- La etiqueta body
- El selector universal (*)
Esto es muy complicado, ponlo más fácil
Está bien, lo haremos (chiste interno, te lo explicamos cuando nos preguntes por aquí o en las redes).
Ya, volviendo al tema, ¿te gusta Star Wars? ¿Sí? Esperamos que sí porque Andy Clark publicó una explicación sobre la especificidad de CSS con el lore de esa saga. ¿Cómo lo hizo? Simple, asoció los selectores de los que hablamos antes con personajes de Star Wars.
La imagen que vamos a compartir la creó en 2005 y la encuentras en el artículo original con toda la explicación de Andy. Aún así, vamos a adelantarte algo:
Esto significa que:
- Los stormtroopers equivalen a los elementos y pseudo-elementos. Su nivel de especificidad es 0,0,0,1.
- Darth Maul equivale a las clases, pseudo-clases y atributos. Su nivel de especificidad es 0,0,1,0.
- Darth Vader equivale a los IDs. Su nivel de especificidad es 0,1,0,0.
- El emperador es lo mismo que dar estilos en el documento HTML con la etiqueta style o como atributo de los elementos HTML.
Así las cosas, sabemos que:
- El emperador es más poderoso que todo el mundo.
- Darth Vader es más poderoso que Darth Maul y los stormtroopers juntos.
- Darth Maul le gana a cualquier cantidad de stormtroopers.
- Los stormtroopers no le ganan a nadie.
¿Significa esto que el emperador es invencible? No, está la Estrella de la Muerte, la propiedad !important, que destruye todo o, digamos, cualquier estilo con esta propiedad sobreescribe los demás estilos. Podríamos decir que tiene una especificidad de 1,0,0,0,0,0
Para ver cómo funciona esto en la práctica, Andy también ha creado una infografía con varios ejemplos. Cuando dice Sith power se refiere a la especificidad.
¿Verdad que es más fácil de entender la especificidad de CSS así? Sin duda, la explicación de Andy es una de las joyas de la web.
En resumen…
La especificidad de CSS permite al navegador decidir cuáles estilos tomar cuando hay dos o más apuntando al mismo elemento.
Entender esto y el nivel de especificidad de cada regla CSS nos permite hacer un trabajo expedito e invertir menos tiempo en solucionar problemas que pudieran surgir a la hora de convertir el diseño de un sitio web en código HTML, es decir, realizar la maquetación.
Nosotros nos dedicamos a actividades de este tipo y procuramos sacarle el máximo provecho a las potencialidades de este lenguaje de programación. Si necesitas ayuda, asesoría o desarrollar una aplicación web progresiva (web app o PWA), envíanos un mensaje. ¡Estamos a un click de distancia!
¡Gracias por leer!
