CSS
Integra cascada, valores, cajas, contextos de formato, layout, pintura, composición, responsive design y arquitectura en un modelo coherente de CSS.
CSS es un sistema declarativo que selecciona elementos, resuelve valores mediante la cascada y entrega esos valores a distintos algoritmos de layout y rendering.
DOM + stylesheets + entorno
↓
selector matching
↓
cascada
↓
herencia y valores calculados
↓
layout y fragmentación
↓
paint y compositing
↓
interfaz final<button type="button">Guardar</button>CSS puede cambiar color, tamaño y posición, pero no convierte un div en botón ni reemplaza nombre, teclado o comportamiento.
.button {
padding: 0.75rem 1rem;
}selector + declarations = style ruleAt-rules añaden condiciones, layers, fonts, keyframes y otras estructuras.
.card > h2:first-child { ... }Clases, atributos, relaciones y pseudo-clases deben expresar un contrato estable, no copiar toda la estructura accidental del DOM.
relevance
→ origin/importance
→ encapsulation
→ layer
→ specificity
→ scope proximity
→ source orderUna clase en una layer prioritaria puede superar un ID en otra layer.
body {
color: var(--color-text);
font-family: system-ui, sans-serif;
}Color y typography suelen heredarse. Margin, border y layout normalmente no.
.button {
--button-bg: var(--color-action-primary);
background: var(--button-bg);
}Conectan temas, tokens y configuración local. Conservan tokens y la propiedad consumidora valida el tipo.
inline-size: min(100% - 2rem, 72rem);
font-size: clamp(1rem, 2vw, 1.5rem);Rem, percentages, viewport units, container units y intrinsic keywords no son intercambiables.
margin-inline: auto;
padding-block: 1rem;Inline y block se adaptan al idioma y dirección. Start/end no equivalen siempre a left/right.
content → padding → border → marginBox-sizing decide qué incluye la dimensión declarada. Margin queda fuera.
width: min-content;
width: max-content;
width: fit-content;Texto, imágenes y controles aportan tamaños intrínsecos. Un layout debe sobrevivir a contenido largo y fuentes fallback.
flow
flex
grid
table
multicolumnEl mismo elemento puede participar externamente como block e internamente como flex/grid container.
Blocks se apilan y texto forma líneas. Margin collapse, baselines y anonymous boxes forman parte del resultado.
No necesitas posicionar cada elemento manualmente.
overflow: auto;
overflow-wrap: anywhere;Antes de recortar, identifica width fija, min-content, cadena larga o positioning incorrecto.
position: absolute;
inset: 0;Absolute, fixed y sticky dependen de ancestors, scroll containers, transforms y containment.
Un stacking context compite como unidad. Un child con 9999 no escapa de un parent que está debajo.
Dialog y popover pueden entrar al top layer.
display: flex;Basis define el punto de partida; grow reparte espacio positivo y shrink reparte déficit.
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));Tracks, lines, areas, auto-placement y subgrid permiten relaciones bidimensionales.
justify → inline/main
align → block/crossItems, content, self, gap y auto margins resuelven tareas distintas.
@media (width >= 48rem) { ... }
@container (width >= 30rem) { ... }Flow, wrapping, intrinsic sizing, media queries y container queries forman un sistema continuo.
Fuente, line-height, metrics, wrapping y ancho de línea cambian dimensiones.
.prose {
max-inline-size: 65ch;
line-height: 1.6;
}color: oklch(60% 0.18 285);Alpha, backgrounds, gradients y themes modifican el resultado. Contraste se evalúa en la composición final.
Una imagen CSS no tiene alt. Contenido informativo pertenece en HTML.
translate: 0 -0.25rem;Cambia representación y puede crear contextos, pero conserva la caja de layout original.
transition: opacity 180ms ease;No crea el estado; interpola entre valores.
animation: enter 300ms ease-out both;Keyframes, timeline e iteration definen reproducción. El estado de producto debe existir fuera de la animación.
@media (prefers-reduced-motion: reduce) { ... }Conserva feedback y contenido sin efectos innecesarios.
Filters, blending, masks y clipping operan sobre el resultado visual. Necesitan fallback, contraste y medición.
primitive → semantic → componentUn token útil conserva función aunque cambie el valor.
base
layout
components
utilities
exceptionsLayers, naming, scope y variantes hacen que las dependencias sean visibles.
Utility-first cambia la forma de autoría y generación. Las reglas finales continúan obedeciendo cascada, layout y soporte del navegador.
Containment, content-visibility y will-change son herramientas con costos. No optimices sin trace, coverage y pruebas reales.
match
→ valid declaration
→ cascade winner
→ computed value
→ used geometry
→ painted resultDevTools muestra cada etapa mejor que añadir reglas al azar.
:where() vale cero?Recorre las notas Esencial en orden y reproduce los ejemplos sin framework.
Aplica las notas Aplicado en una página con:
Estudia las notas Avanzado al trabajar con:
Para cualquier regla, pregunta:
¿Qué elementos selecciona?
¿Qué otras declarations compiten?
¿La propiedad hereda?
¿Qué valor calculado produce?
¿Qué caja o eje modifica?
¿Qué algoritmo de layout la consume?
¿Afecta style, layout, paint o composite?
¿Qué ocurre con contenido largo?
¿Qué ocurre con zoom, RTL y preferencias?
¿Qué fallback necesita?Cuando algo “no funciona” en CSS, vuelve a estas preguntas:
¿El selector coincide?
¿La declaration es válida?
¿Qué layer y specificity tiene?
¿Una shorthand la reinició?
¿El valor hereda o depende del contenedor?
¿Min-content impide encoger?
¿Estoy en flow, Flex o Grid?
¿Un ancestor creó scroll/containing/stacking context?
¿El DOM order sigue siendo correcto?
¿La feature necesita fallback?Responderlas convierte CSS en un sistema predecible, no en ensayo y error.