Usa el Calculadora de Especificidad CSS gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningun servidor.
Por que la especificidad decide tus estilos
Todo desarrollador CSS ha vivido el mismo misterio: una regla que deberia aplicarse no se aplica, y el navegador parece ignorarla. La causa habitual es la especificidad, el sistema de puntuacion que usan los navegadores cuando varias reglas apuntan al mismo elemento y propiedad. La regla con mayor puntuacion gana, sin importar el orden, y solo cuando las puntuaciones empatan gana la regla posterior. Entender ese sistema convierte horas de prueba y error en un calculo rapido.
La especificidad se escribe como tres numeros: IDs, clases y elementos. Un selector de ID como #main puntua (1, 0, 0). Una clase como .card puntua (0, 1, 0). Un elemento como div puntua (0, 0, 1). Compara los numeros de izquierda a derecha, como un numero de tres digitos: (1, 0, 0) supera a (0, 99, 99), porque la columna de ID pesa mas que todo lo de las columnas posteriores. Esa regla de izquierda a derecha es todo el juego.
Como usar la herramienta
Escribe un selector en la primera caja y su puntuacion aparece al instante, con el desglose de IDs, clases y elementos. Escribe un segundo selector para comparar: la herramienta te dice cual gana, o que empatan, en cuyo caso decide la regla posterior en la hoja de estilos. Usala cuando un estilo no se aplica, cuando eliges entre dos selectores, o cuando revisas el CSS de otra persona y te preguntas por que perdio una regla.
Pruebala con tus propias hojas de estilos. Pega el selector que esta perdiendo y el que esta ganando, y la comparacion suele explicar el misterio de inmediato. La sorpresa comun es una cadena larga de clases que pierde contra un solo ID, o una regla con muchos elementos que pierde contra una clase, porque las columnas no se mezclan como sugiere la intuicion.
Que cuenta en cada columna
La columna de ID cuenta selectores de ID: #header, #main, #submit. Cada uno suma 1. La columna de clase cuenta selectores de clase, selectores de atributo como [type=”text”], y pseudoclases como :hover, :focus y :nth-child(). Cada uno suma 1. La columna de elemento cuenta nombres de elemento como div y p, y pseudoelementos como ::before y ::after, incluidas las formas antiguas de un solo colon :before y :after. Cada uno suma 1.
El selector universal * no suma nada, por eso * { margin: 0 } pierde contra todo. Los combinadores, los espacios, >, + y ~ entre partes de un selector, tampoco suman nada: describen relaciones, no objetivos. Un selector como ul li a puntua (0, 0, 3) solo por sus tres elementos, sin importar como se conectan las partes.
Casos especiales: Not, Is y Where
Tres pseudoclases tienen reglas de puntuacion especiales, y confunden a la gente con frecuencia. :not() suma la especificidad de su argumento: :not(.card) puntua (0, 1, 0), igual que .card mismo, mientras el :not en si no suma nada. :is() toma la mayor especificidad entre sus argumentos: :is(#main, .card) puntua (1, 0, 0), porque el argumento ID gana. :where() siempre puntua cero, sin importar sus argumentos, lo que la convierte en la herramienta para escribir valores por defecto de baja especificidad que cualquier regla posterior puede anular.
Estas reglas importan en codigo real. Una hoja de estilos de reinicio escrita con :where() se mantiene anulable por clases normales, que es justo lo que debe hacer un reinicio. Una libreria de componentes que delimita estilos con :is() puede crear sin querer selectores de alta especificidad desde un argumento ID, haciendo sus estilos dificiles de anular. Conocer la regla te permite elegir la pseudoclase correcta de forma deliberada en vez de descubrir su coste despues.
Estilos en linea e Important
Dos cosas quedan fuera de la puntuacion de tres columnas. Los estilos en linea, escritos en un atributo style, superan a cualquier selector, porque se tratan como una columna superior propia. La marca !important supera a todo salvo otro !important, y la especificidad rompe los empates entre reglas importantes. Ambas son salidas de emergencia, y ambas crean el mismo problema: hacen mas dificiles las anulaciones futuras, porque el siguiente desarrollador debe usar una salida aun mas fuerte.
Mantener baja la especificidad
El habito CSS mas sano es mantener la especificidad plana y baja: casi siempre clases sueltas, a veces dos, casi nunca IDs para estilos. Cuando cada regla puntua (0, 1, 0) o (0, 2, 0), el orden decide los conflictos, y el orden es facil de razonar: gana la posterior. Cuando las puntuaciones varian mucho, el orden deja de importar y solo el calculo explica el resultado, que es donde viven los errores misteriosos.
Errores comunes
El error mas comun es luchar contra la especificidad anadiendo mas: una regla pierde, asi que el desarrollador escribe un selector mas largo, que gana hoy y se convierte en el misterio de manana. La solucion mejor suele ser encontrar la regla ganadora y bajar su puntuacion, o mover tu regla despues en la hoja de estilos cuando las puntuaciones empatan. Otro error es contar las columnas como un solo numero de forma incorrecta: (0, 2, 0) no es “20” de forma que se compare con (1, 0, 0) como “100” por accidente; la regla de columnas es exacta, y diez clases nunca superan a un ID.
Herramientas relacionadas
- CSS Specificity Calculator (English version)
- Convertidor de HTML a JSX
- Formateador de Consultas GraphQL