¿Cómo deciden la cascada y la herencia qué estilos se aplican?

Question

Accepted Answer

Cuando varias reglas podrían aplicar estilo a un elemento, dos mecanismos deciden el resultado: la **cascada** (qué regla gana) y la **herencia** (qué propiedades se transmiten de padres a hijos).

## La cascada — resolviendo conflictos, en orden

El navegador elige la declaración ganadora verificando, en orden de prioridad:

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## Herencia — algunas propiedades se pasan a los hijos

Ciertas propiedades (principalmente **relacionadas con texto**) son heredadas automáticamente por los descendientes; la mayoría no lo son.

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**Heredadas** de forma predeterminada: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **No heredadas**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Controlando la herencia explícitamente

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## Resumen de especificidad dentro de la cascada

Esto es por qué una regla de baja especificidad puede perder incluso si se escribe después — la especificidad se verifica *antes* del orden de fuente. Entender el orden (importancia → especificidad → orden de fuente) explica casi todo caso de "mi estilo no se aplica".

## Por qué es importante

La cascada y la herencia son el modelo central de *cómo CSS realmente resuelve*.

Conocer el orden de prioridad depura conflictos, saber qué propiedades se heredan te permite establecer `color`/`font` una sola vez en `body` en lugar de en todas partes, y `inherit`/`initial`/`unset` te dan control preciso — juntas hacen que CSS sea predecible en lugar de mágico.