CSS
Explica cómo CSS resuelve declaraciones en conflicto mediante origen, importancia, contexto, especificidad, alcance y orden de aparición.
La cascada es el algoritmo que decide qué declaración gana cuando varias asignan una propiedad al mismo elemento.
.card { color: blue; }
.featured { color: purple; }Para cada propiedad, el navegador compara:
1. Relevancia
2. Origen e importancia
3. Contexto de encapsulación
4. Cascade layer
5. Especificidad
6. Proximidad de scope
7. Orden de apariciónLas transiciones y animaciones ocupan posiciones especiales dentro del orden general.
Una regla debe coincidir y cumplir sus condiciones:
@media (width >= 60rem) {
.layout { display: grid; }
}Fuera de la condición, la declaración no compite.
En términos simplificados:
user-agent normal
user normal
author normal
animations
author !important
user !important
user-agent !important
transitionsEl orden exacto importa porque un estilo de usuario importante puede superar uno del autor, protegiendo preferencias de accesibilidad.
@layer vendor, app;
@layer vendor {
#checkout .button { color: red; }
}
@layer app {
.button { color: blue; }
}La layer app tiene mayor prioridad normal aunque su selector sea menos específico.
Solo se compara entre declaraciones que ya empataron en origen, importancia y layer.
.card { color: blue; }
main .card { color: purple; }main .card gana por especificidad.
.card { color: blue; }
.card { color: purple; }Si todo lo anterior empata, gana la última.
.card {
margin-inline-start: 2rem;
margin: 0;
}La shorthand posterior reinicia el margen inicial.
Para declaraciones normales, las layers posteriores ganan. Para !important, el orden de layers se invierte: las primeras layers importantes tienen prioridad.
Esto protege resets o guardrails definidos deliberadamente al inicio.
<div style="color: red" class="card"></div>El estilo inline tiene prioridad alta dentro de author normal, pero puede ser superado por author !important y por orígenes importantes superiores.
Una animation puede superar author normal. Una declaration !important puede superar una animation. Una transición activa tiene una posición todavía más alta durante el cambio.
No uses animaciones como estrategia de override.
Si ninguna declaración asigna una propiedad heredable, el elemento puede recibir el valor calculado del padre. La herencia no compite como otro selector.
En DevTools revisa:
¿Por qué .button en una layer posterior puede vencer a #app .button en una layer anterior?
Porque la prioridad de layer se compara antes de la especificidad; el selector de la layer perdedora ya no llega al desempate por especificidad.
Selectores y combinadores explica qué elementos participan en cada regla.