Estilos CSS: Cascada, especificidad, herencia y unidades

Cuando dos reglas de estilo compiten por el mismo elemento, el resultado no es aleatorio: el navegador aplica un algoritmo determinista para decidir cuál gana. Comprender ese algoritmo —la cascada, la especificidad y la herencia— es la diferencia entre pelear contra CSS a punta de !important y escribir hojas de estilo predecibles y mantenibles.

Este artículo abre la serie Estilos CSS. Analizaremos cómo el navegador resuelve conflictos, cómo se calcula el peso de un selector y cómo aprovechar las unidades relativas para construir interfaces que escalan.

La cascada: cómo el navegador resuelve conflictos

CSS significa Cascading Style Sheets. La cascada es precisamente el conjunto de reglas que determina qué declaración prevalece cuando varias apuntan a la misma propiedad de un elemento. El navegador evalúa tres criterios en orden:

1. Origen de la hoja de estilos — de dónde provienen los estilos.
2. Especificidad del selector — qué selector es más “específico”.
3. Orden en el código — cuál se declaró de último.

Origen de los estilos

Existen tres orígenes posibles, con prioridad creciente:

• User agent styles — los estilos por defecto del navegador (por ejemplo, el margin de un <h1> o el subrayado de un enlace).
• Author styles — los estilos que tú defines en tus archivos .css.
• User styles — estilos configurados por el propio usuario en el navegador (accesibilidad, tamaños de fuente). Tienen prioridad sobre los anteriores.

Tus estilos (author) pisan a los del navegador, que es justo lo que esperas al escribir una hoja de estilos.

Especificidad: el peso de un selector

La especificidad se representa con la notación 0,0,0,0, donde cada posición cuenta, de izquierda a derecha: estilos inline, IDs, clases y nombres de etiqueta.

Las reglas de desempate son sencillas:

1. Una declaración con !important gana por encima de todo (úsala con prudencia).
2. Gana el selector con más IDs.
3. Si hay empate, gana el que tenga más clases.
4. Si persiste el empate, gana el que tenga más etiquetas.

Observa cómo dos reglas compiten por el color del párrafo. La clase .destacado gana al selector de etiqueta p, aunque la regla de p se declare después:

p { color: #555; }
.destacado { color: #c0392b; }

<p>Texto con el color por defecto del selector de etiqueta.</p>
<p class="destacado">Este párrafo gana por especificidad de clase.</p>

Orden del código: el último en hablar gana

Cuando dos declaraciones tienen el mismo origen y la misma especificidad, el navegador aplica la que aparece de última en el código fuente. Este comportamiento es crítico al ordenar las pseudo-clases de un enlace.

a:link    { color: #2a7ae2; }
a:visited { color: #8e44ad; }
a:hover   { text-decoration: underline; }
a:active  { color: #c0392b; }

Como las cuatro pseudo-clases tienen la misma especificidad, su orden importa. La regla mnemotécnica es LoVe/HAte — link, visited, hover, active. Si inviertes :hover y :link, el :hover nunca se aplicaría.

Herencia: propiedades que viajan hacia abajo

La herencia permite que ciertas propiedades de un elemento padre se transmitan a sus hijos. No todas las propiedades heredan: lo hacen principalmente las relacionadas con texto (color, font-family, line-height, text-align), mientras que las de caja (margin, padding, border) no.

.tarjeta { color: #1a5276; font-family: Georgia, serif; }

<div class="tarjeta">
  <h4>Título heredado</h4>
  <p>Este párrafo hereda <em>color</em> y <em>font-family</em> del contenedor.</p>
</div>

Valores especiales: inherit e initial

Dos palabras clave te dan control explícito sobre la herencia:

• inherit — fuerza a una propiedad a tomar el valor del padre, incluso en propiedades que normalmente no heredan.
• initial — restablece la propiedad a su valor inicial según la especificación, ignorando la herencia.

Unidades absolutas vs. relativas

El píxel (px) es la unidad absoluta más común. Existen otras (pt, cm, in) con equivalencias fijas: 1in = 96px = 72pt. Sin embargo, las unidades relativas son las que permiten construir interfaces que escalan con el contexto.

em: relativo al elemento

Un em equivale al font-size del propio elemento. Es ideal para padding, margin y border-radius, porque estos escalan junto con el tamaño de fuente.

.caja { padding: 1em; border-radius: 1em; background: #ecf0f1; }
.caja--pequena { font-size: 12px; }
.caja--grande  { font-size: 20px; }

El padding de ambas cajas es 1em, pero al cambiar el font-size el espaciado escala proporcionalmente sin tocar la propiedad padding.

rem: relativo a la raíz

rem (root em) siempre toma como referencia el font-size del elemento raíz (<html> o :root). Esto te da un punto de control global: cambiar el tamaño de la raíz redimensiona todo el documento de forma coherente.

:root { font-size: 0.875em; }

@media (min-width: 800px)  { :root { font-size: 1em; } }
@media (min-width: 1200px) { :root { font-size: 1.125em; } }

Una práctica habitual: usar rem para tipografía, px para bordes y em para padding, margin y border-radius.

Unidades relativas al viewport

• vw — 1% del ancho del viewport.
• vh — 1% del alto del viewport.
• vmin — 1% de la dimensión más pequeña entre ancho y alto.
• vmax — 1% de la dimensión más grande.

calc() para combinar unidades

calc() permite operar entre unidades de distinta naturaleza, algo imposible de otra forma. Es muy útil para tipografía fluida:

:root { font-size: calc(0.5em + 1vw); }

Números sin unidad y line-height

Si declaras un número sin unidad en line-height, este actúa como un factor multiplicador del font-size del elemento. Es la forma recomendada, porque cada descendiente calcula su propia altura de línea a partir de su tamaño de fuente.

body { line-height: 1.5; }

Custom properties (variables CSS)

Las variables CSS se declaran con el prefijo -- y se consumen con la función var(). A diferencia de las variables de un preprocesador, son dinámicas: viven en el DOM y respetan la cascada y la herencia.

:root {
  --color-marca: #2a9da9;
  --color-texto: #1c2833;
}

.panel {
  color: var(--color-texto);
  border-left: 4px solid var(--color-marca);
}

var() acepta un segundo argumento como valor de respaldo: var(--color-secundario, #888) usará #888 si la variable no está definida.

Redefinir variables por contexto

Como las variables respetan la cascada, puedes sobrescribirlas dentro de un bloque para crear temas locales. Aquí el mismo componente .panel se reconfigura dentro de .tema-oscuro cambiando solo las variables:

:root        { --fondo: #fff;  --texto: #111; }
.tema-oscuro { --fondo: #2c3e50; --texto: #ecf0f1; }

.panel {
  background: var(--fondo);
  color: var(--texto);
  padding: 1em;
  border-radius: .5em;
}

El componente no cambió ni una línea: solo redefinimos las variables en un contenedor superior. Ese es el poder de combinar herencia y custom properties.

Conclusión

La cascada, la especificidad y la herencia forman el núcleo conceptual de CSS. Dominarlos te permite predecir qué regla gana sin recurrir a parches. Sumado a un buen uso de unidades relativas y variables, tienes la base para escribir estilos escalables y mantenibles.