CSS
Explica qué propiedades se heredan, cómo se calculan los valores y cuándo usar inherit, initial, unset, revert y revert-layer.
Algunas propiedades heredan el valor calculado del padre cuando el elemento no tiene un valor ganador propio.
body {
color: #222;
font-family: system-ui, sans-serif;
}Comúnmente heredan:
colorfont-*line-heighttext-alignvisibilityComúnmente no heredan:
marginpaddingborderbackgroundwidthdisplayConsulta la definición formal cuando importe.
.button {
color: inherit;
font: inherit;
}Obliga a usar el valor calculado del padre incluso si la propiedad normalmente no hereda.
.component {
color: initial;
}Usa el valor inicial definido por la especificación, no necesariamente el default del navegador ni el valor “vacío”.
.component {
color: unset;
margin: unset;
}Se comporta como inherit para propiedades heredables y como initial para las demás.
button {
all: revert;
}Retrocede al valor de un origen anterior de la cascada, permitiendo recuperar estilos de usuario o user-agent.
No significa “quitar todo CSS”.
.utility-reset {
color: revert-layer;
}Retrocede dentro del origen a lo definido por layers anteriores.
.widget {
all: unset;
}Aplica un valor global a casi todas las propiedades. Puede borrar comportamiento visual esencial, writing mode, font y focus. Úsalo solo con un contrato muy claro.
direction y custom properties tienen reglas especiales y no se reinician igual mediante all.
.icon-button {
color: var(--button-color, currentColor);
}currentColor reutiliza el valor calculado de color, permitiendo que bordes, SVG y sombras sigan el tema.
body {
line-height: 1.5;
}Un número sin unidad hereda como factor y se recalcula con el font-size de cada descendiente. Un valor en px hereda como longitud fija y puede quedar desproporcionado.
Algunos controles nativos no heredan font de forma uniforme según estilos del UA.
button,
input,
select,
textarea {
font: inherit;
}inherit, initial, unset, revert y revert-layer cumplen tareas distintas.all es una herramienta agresiva.¿Por qué margin: unset normalmente no copia el margen del padre?
Porque margin no es heredable; unset se comporta como initial para esa propiedad.
Cascade layers organiza prioridades sin aumentar selectores.