Herencia CSS — Frontend Classroom

La herencia es el mecanismo por el que ciertos valores de propiedades CSS se transmiten automáticamente desde un elemento padre a todos sus hijos y descendientes, sin necesidad de repetir la declaración en cada elemento. Si declarás color: navy en el <body>, todos los elementos de texto dentro del body adoptarán ese color — a menos que algún descendiente lo sobreescriba explícitamente.

La herencia existe porque es conveniente: sin ella, tendrías que declarar el color de texto y la tipografía en absolutamente cada elemento del documento. En cambio, podés declarar font-family: sans-serif; color: #1e293b; una sola vez en body o en un contenedor y toda la página lo hereda. Es eficiencia y consistencia al mismo tiempo.

Pero la herencia no aplica a todas las propiedades — y esto es fuente frecuente de confusión. Solo las propiedades que tienen sentido semántico heredar lo hacen. Las propiedades de texto y tipografía (color, font-family, font-size, font-weight, line-height, text-align, entre otras) se heredan. Las propiedades de layout y box model (margin, padding, border, width, height, display, position) no se heredan — por una razón muy concreta: heredar el padding: 24px del padre en cada hijo anidado haría el layout imposible de controlar.

Cómo funciona

Qué se hereda y qué no

La especificación CSS define para cada propiedad si es “inherited” (heredada) o “non-inherited”. La regla práctica:

Se heredan (propiedades tipográficas y de texto):

color
font-family, font-size, font-weight, font-style, font-variant
line-height, letter-spacing, word-spacing
text-align, text-transform, text-decoration (parcialmente)
list-style (en listas)
cursor, visibility

No se heredan (propiedades de layout y box model):

margin, padding, border
width, height, min-*, max-*
display, position, top, right, bottom, left
background, background-color
overflow, z-index
flex-*, grid-*

La distinción tiene lógica: heredar color de un contenedor padre ahorra repetición y tiene sentido semántico (el texto de un artículo debería tener el mismo color base). Pero heredar padding: 24px o position: absolute desde el padre en cada hijo anidado haría el layout completamente impredecible.

Los valores de control: `inherit`, `initial`, `unset`

Estas tres palabras clave permiten controlar explícitamente la herencia de cualquier propiedad, sea heredada o no por defecto.

`inherit` — forzar la herencia

Hace que la propiedad tome el valor del padre, aunque normalmente no se hereda.

.hijo {
  border: inherit; /* hereda el border del padre, aunque border no hereda por defecto */
}

También es útil para forzar la herencia en propiedades que sí deberían heredar pero fueron sobreescritas en el camino:

a { color: inherit; } /* el <a> adopta el color de su padre en lugar del azul del UA */

`initial` — restablecer al valor de la especificación

Hace que la propiedad tome el valor inicial definido en la especificación CSS, sin importar qué venga del padre o de otras reglas.

p { color: initial; } /* restablece al valor inicial: canónicamente 'black' para color */

Importante: initial es el valor de la especificación, no el del navegador. Para algunas propiedades pueden diferir ligeramente (el user-agent puede haber modificado el default).

`unset` — hereda si puede, inicial si no

unset es la combinación inteligente: si la propiedad es heredable, se comporta como inherit; si no lo es, se comporta como initial. Útil cuando querés “limpiar” una propiedad sin preocuparte por si hereda o no.

.reset { 
  all: unset; /* resetea todas las propiedades a su estado "limpio" */
}

Valores heredados vs. cascada

La herencia no compite con la cascada por prioridad — siempre pierde. Una declaración directa sobre el hijo, aunque tenga la especificidad más baja posible (*), sobreescribe un valor heredado:

body { color: navy; }    /* heredado por todos los hijos */
* { color: red; }        /* (0,0,0,0) — pero es declaración directa: gana sobre herencia */

El selector * con especificidad 0 gana sobre el color heredado porque es una regla que apunta directamente al elemento hijo, mientras que la herencia no es una regla directa sino un mecanismo de propagación.

CSS resets y estilos por defecto

Cada navegador tiene su propia hoja de estilos user-agent con valores por defecto para todos los elementos HTML: el <h1> es grande y negrita, el <body> tiene margin: 8px, el <ul> tiene padding y bullets. Estos valores difieren ligeramente entre Chrome, Firefox y Safari.

Los CSS resets existen para normalizar esas diferencias y partir desde una base predecible. Los más conocidos:

Reset de Meyer (2004): elimina todo — pone margin: 0; padding: 0 a todos los elementos. Punto de partida limpio pero hay que redefinir todo.
Normalize.css: no elimina los estilos del browser, sino que los iguala entre browsers preservando los útiles. Más conservador.
Reset moderno (Josh W. Comeau, 2021+): un conjunto mínimo de resets pragmáticos: box-sizing: border-box global, márgenes de imágenes, line-height heredable, etc.

La cicatriz del sandbox de este sitio (docs/CICATRICES.md A.1.7) incluye un reset que aplica box-sizing: border-box y normaliza algunos valores — es parte del entorno de práctica.

Gotchas conceptuales

background-color no se hereda. El fondo es transparente por defecto en los hijos — lo que parece herencia del fondo es simplemente que el hijo transparente deja ver el fondo del padre. Si querés forzarlo, usá background-color: inherit.
font-size relativo sí se hereda en su valor computado. Si el padre tiene font-size: 1.2em y el hijo también, el hijo aplica el 1.2em sobre el tamaño ya computado del padre (no sobre el default), lo que puede crear acumulación inesperada. rem evita esto al ser siempre relativo al root.
color: inherit en links. Los <a> tienen color azul del user-agent que sobreescribe la herencia de color. Si querés que el link adopte el color de su contenedor, declarás a { color: inherit; }.
Las custom properties (var()) siempre se heredan. Las variables CSS definidas con --nombre: valor se transmiten a todos los hijos, lo que las convierte en una herramienta poderosa para tematización. Si definís --color-primary: navy en :root, cualquier elemento puede usar color: var(--color-primary). Esto es un vecino conceptual directo de la herencia — las custom properties amplían el mecanismo a cualquier valor arbitrario.
all: unset resetea todo. La propiedad shorthand all con valor unset, initial o inherit aplica ese valor a todas las propiedades CSS del elemento de una vez. Útil para aislar componentes que no deben ser afectados por estilos globales.

Vigente / legacy

La herencia CSS existe desde CSS1 y es parte fundamental del lenguaje. inherit también es CSS2. initial y unset son CSS3 con soporte universal. La palabra clave revert (más nueva, Baseline 2021) hace que la propiedad reverta al valor del user-agent stylesheet — es un cuarto valor de control que complementa a initial/inherit/unset pero con soporte universal más reciente.