Mis mejores utilidades, ahora en tu móvil.
Accede a todas mis herramientas y proyectos de forma rápida, optimizada y en un solo lugar.
# ¿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. 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 en tres categorías que forman un peso de tres columnas, expresado como (A, B, C):- Columna A (IDs): Suma el número de identificadores únicos. 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 (
div,h1) y pseudo-elementos (::before).
# La regla de oro: no hay acarreo numérico
Una regla con especificidad (0,50,0) nunca será más específica que una regla (1,0,0). Un solo ID vence a infinitas clases. Las columnas no se trasladan entre sí.
# El problema de !important y la arquitectura BEM
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 mala práctica ya que destruye la cascada natural.Para evitar guerras de especificidad en proyectos grandes, metodologías como BEM abogan por el uso exclusivo de selectores de clase a un único nivel de profundidad, manteniendo la especificidad plana en (0,1,0).