¿Qué es la Especificidad en CSS?
La especificidad en CSS es el algoritmo mediante el cual los navegadores deciden qué valores de las propiedades aplicarán a un elemento en particular. Básicamente, es una puntuación matemática que indica al navegador "cuán específica" es una regla.
Si dos reglas tienen diferentes niveles de especificidad, ganará la que tenga mayor peso, sin importar el orden en el que fueron escritas. Si ambas tienen el mismo peso, ganará la última declarada en el código fuente.
¿Cómo calcular la Especificidad CSS?
La especificidad se calcula basándose en tres categorías principales que forman un peso de tres columnas, a menudo expresado como (A, B, C):
- Columna A (IDs): Suma el número de identificadores únicos en la
regla. Ejemplo:
#headercuenta como 1 en la columna A. - Columna B (Clases, Atributos y Pseudos): Suma todas las clases
(
.button), atributos ([type="text"]) y pseudo-clases (:hover). - Columna C (Elementos y Pseudo-elementos): Suma todos los elementos
html tradicionales (
div,h1) y pseudo-elementos (::before).
La regla de oro: No hay acarreo numérico
A diferencia del sistema numérico base 10 regular, una columna con menor prioridad jamás podrá "alcanzar" a una columna con mayor prioridad. Es decir, una regla con una especificidad (0, 10, 0) o incluso (0, 50, 0) nunca será más específica que una regla (1, 0, 0). ¡Un solo ID vence a infinitas clases!
El terror del !important
La directiva !important es una excepción a las reglas de especificidad. Cuando
la utilizas, esa declaración sobrescribe cualquier otra automáticamente. Se considera una
mala práctica en el desarrollo web moderno ya que destruye la cascada natural y hace que
el mantenimiento del diseño sea frustrante y propenso a errores.
Mejores Prácticas (La arquitectura BEM)
Para evitar guerras de especificidad en proyectos grandes, la comunidad de Frontend diseñó metodologías como BEM (Block, Element, Modifier). BEM aboga por el uso exclusivo de selectores de clase a un único nivel de profundidad, manteniendo artificialmente la especificidad plana (0, 1, 0).
Esta calculadora gráfica está diseñada para darte claridad instantánea sobre el peso particular de cualquier combinación de selectores, garantizando que puedas entender perfectamente qué estilos se inyectarán en tu DOM.