¿Qué es la especificidad CSS y por qué importa?
Cuando dos reglas CSS apuntan al mismo elemento y la misma propiedad (p. ej. `color`), el navegador tiene que decidir cuál aplicar. Esa es la cascada. Los factores decisivos: origen (autor vs usuario), !important, especificidad de selector y orden de fuente.
La especificidad es el peso numérico de un selector. La puntuamos en cuatro buckets (a, b, c, d): a = estilo inline, b = número de IDs, c = número de clases / atributos / pseudo-clases, d = número de elementos / pseudo-elementos. El selector `#header .card a` puntúa (0, 1, 1, 1). El selector `.menu .item.active` puntúa (0, 0, 3, 0). El primero gana por el ID.
Pega un selector y ve el número concreto más un desglose de qué contribuyó qué. El modo Comparar muestra qué selector gana para la misma propiedad. El modo bloque-CSS parsea una regla completa y saca conflictos a la luz.
Cómo usar
- Elige un modo: Selector único (depurar uno específico), Comparar (unos cuantos selectores en paralelo), Bloque CSS (una regla completa).
- Pega el selector o código CSS en la entrada.
- La herramienta muestra especificidad como (a,b,c,d) más un desglose: qué puntuó qué.
- El modo comparar resalta el ganador: el selector con mayor especificidad gana el conflicto.
- Pulsa "Copiar" para copiar el resultado (para una revisión de código o docs).
Cuándo ayuda
Situaciones reales en las que la especificidad importa:
- Depurar "¿por qué no se aplica mi estilo?". Tu regla `.button { color: red }` no se queda: lo más probable es que otra regla tenga mayor especificidad. Pega ambas, ve cuál gana.
- Refactor CSS. Pasar de CSS legacy a BEM / utility-first: tienes que entender los pesos actuales de los selectores.
- Migrar a Tailwind. Tailwind usa mayormente clases (especificidad 0,0,1,0): si tu regla legacy es `#sidebar .menu a:hover` (0,1,2,1) entonces Tailwind pierde. O recurres a `!important` o subes la especificidad de la clase Tailwind.
- Revisión de código. Un comentario tipo "este selector tiene demasiada especificidad, difícil de sobreescribir": la herramienta da números concretos para la discusión.
- Aprender Selectors L4: `:where()` siempre es especificidad cero, `:is()` toma la mayor de sus argumentos, igual hace `:has()`. Practicar ayuda a recordar.
- CSS-in-JS / Styled Components. Las clases generadas son de baja especificidad (`.css-abc123`): fácilmente sobreescribibles por `#id` o `!important`. Bueno saberlo.
- Stylesheets de impresión. Las reglas dentro de `@media print` pueden tener la misma especificidad que las normales: decide el orden de fuente.
Para construir un gradiente CSS usa el generador de gradientes. Para box-shadow mira el generador box-shadow.