wandres.dev
La cascada, el layout y el color de 2026

Domina CSS Moderno
hasta nivel dios

CSS de verdad: cascada y capas, :has, nesting, @scope, grid y subgrid, container queries, OKLCH, anchor positioning, arquitectura y rendimiento.

La ruta

56 niveles, de novato a dios

Cada nivel construye sobre el anterior. Sin saltos, sin huecos.

Ontología Nivel 0 · El mapa del CSS moderno

La visión aérea: qué resuelve CSS, qué cambió entre 2020 y 2026, y el mapa mental de todo el territorio que vas a dominar.

Mapa mentalOntologíaBaseline

Qué es CSS de verdad Nivel 1 · Un lenguaje declarativo de restricciones

CSS no ordena, sugiere restricciones que el motor resuelve. Entender esto cambia cómo escribes todo lo demás.

DeclarativoRestriccionesMotor

La cascada Nivel 2 · Origen, importancia, capas, especificidad

Los seis criterios reales de la cascada en orden, y por qué la especificidad es el penúltimo y no el primero.

CascadaOrigenOrden

Especificidad Nivel 3 · El sistema de tres números

Cómo se cuenta de verdad, por qué los IDs son una trampa, y cómo dejar de pelear con !important.

EspecificidadIDs!important

Capas en cascada Nivel 4 · @layer y el control del orden

Declarar capas, importarlas, anidarlas y por qué una capa vence a la especificidad. La herramienta que faltaba.

@layerOrdenReset

Herencia Nivel 5 · inherit, initial, unset, revert

Qué se hereda y qué no, los cuatro valores globales, revert-layer, y el valor calculado frente al usado.

HerenciarevertComputado

Selectores modernos Nivel 6 · :is, :where y la especificidad cero

Agrupar sin inflar la especificidad, :where como llave maestra del CSS de librería, y :not con listas.

:is:where:not

El selector de padre Nivel 7 · :has() y lo que desbloquea

El selector relacional: estilar el contenedor según su contenido, el hermano anterior, y patrones que antes exigían JS.

:hasRelacionalSin JS

Selectores estructurales Nivel 8 · nth-child of, rangos y estado

nth-child con of, los pseudo-clases de estado, :focus-visible frente a :focus, y :user-invalid.

nth-child of:focus-visibleEstado

Anidamiento nativo Nivel 9 · Nesting sin preprocesador

La sintaxis, el ampersand implícito, la regla del relative selector, y las diferencias reales con Sass.

Nesting&vs Sass

Ámbito de estilos Nivel 10 · @scope, raíz y límite

Acotar estilos a un subárbol con techo y suelo, el donut scope, y la proximidad como criterio de cascada.

@scopeDonutProximidad

Custom properties Nivel 11 · Variables que viven en la cascada

No son variables de preprocesador: se heredan, se recalculan y se pueden cambiar en runtime. El fallback y el truco del espacio.

--varFallbackRuntime

Propiedades tipadas Nivel 12 · @property y el registro

Registrar una custom property con sintaxis, herencia y valor inicial. Lo que desbloquea: animar gradientes y ángulos.

@propertysyntaxAnimable

El modelo de caja Nivel 13 · box-sizing, márgenes y colapso

Content-box frente a border-box, el colapso de márgenes con sus tres casos, y por qué gap lo elimina.

box-sizingColapsogap

Contextos de formato Nivel 14 · BFC, IFC y el flujo normal

Qué es un formatting context, qué lo crea, y por qué explica el 80% de los bugs de layout que parecen magia.

BFCFlujoContexto

Dimensionar Nivel 15 · Tamaños intrínsecos y extrínsecos

min-content, max-content, fit-content y el algoritmo de resolución de anchos. La base de todo layout que no se rompe.

min-contentfit-contentIntrínseco

Flexbox: el algoritmo Nivel 16 · Base, crecer, encoger

flex-basis, grow y shrink como un sistema, la trampa de flex:1, y min-width auto que rompe el overflow.

flex-basisshrinkmin-width

Flexbox en la práctica Nivel 17 · Alineación, orden y patrones

Los ejes, alinear con margin auto, wrap y sus límites, y los patrones canónicos: barra, media object, sticky footer.

EjesAlineaciónPatrones

Grid I Nivel 18 · El sistema de dos dimensiones

Filas, columnas, la unidad fr, repeat, minmax y el modelo de líneas frente al de celdas.

frrepeatminmax

Grid II Nivel 19 · Áreas, líneas nombradas, auto-placement

grid-template-areas, nombrar líneas, el algoritmo de colocación automática y grid-auto-flow dense.

areasNombradasdense

Subgrid Nivel 20 · Heredar las pistas del padre

El problema que resuelve: alinear contenido entre tarjetas hermanas. Sintaxis, herencia de gaps y soporte real.

subgridAlineaciónTarjetas

Grid o Flex Nivel 21 · El árbol de decisión

Cuándo cada uno, por qué no compiten, y los casos donde combinarlos es la respuesta correcta.

DecisiónGrid vs FlexCombinar

Layouts intrínsecos Nivel 22 · Responsive sin breakpoints

auto-fit frente a auto-fill, el patrón RAM, y layouts que se adaptan por contenido en vez de por viewport.

auto-fitRAMSin MQ

Alineación unificada Nivel 23 · La caja de alineación en todo

justify y align como sistema transversal, las propiedades place, y su llegada a bloque con align-content.

place-itemsAlineaciónBloque

Container queries Nivel 24 · Consultar el contenedor, no la ventana

containment, container-type, container-name y por qué esto es el cambio más grande del layout en una década.

@containercontainer-typeinline-size

Unidades de contenedor Nivel 25 · cqw, cqi, cqmin y compañía

Dimensionar en relación al contenedor, y el patrón de componente verdaderamente portable.

cqicqwPortable

Container style queries Nivel 26 · Consultar custom properties

La función style sobre custom properties, el soporte real en 2026, y los patrones que ya funcionan hoy.

style()SoporteVariantes

Media queries modernas Nivel 27 · Rangos y consultas de usuario

La sintaxis de rango, prefers-reduced-motion, prefers-color-scheme, prefers-contrast y las de puntero.

Rangospreferspointer

Soporte y degradación Nivel 28 · @supports y las capas de fallback

Detectar features, comprobar selectores, y la estrategia de escribir el fallback primero.

@supportsselector()Fallback

Unidades Nivel 29 · px, em, rem, ch, lh, vi, dvh

El catálogo completo: las relativas al tipo, las lógicas, y por qué dvh existe y svh es distinto.

remchdvh

Escalas fluidas Nivel 30 · clamp() y la tipografía que respira

La matemática de clamp con viewport, construir una escala modular, y el problema de accesibilidad al hacer zoom.

clampEscalaZoom

Fuentes web Nivel 31 · @font-face, subsetting, font-display

Cargar sin FOIT ni FOUT, unicode-range, preload, y el coste real de cada peso.

@font-facefont-displaySubset

Fuentes variables Nivel 32 · Ejes y font-variation-settings

Un archivo, infinitos pesos: los ejes registrados y personalizados, y cuándo sale a cuenta.

VariablesEjeswght

Detalles tipográficos Nivel 33 · text-wrap, hyphens, features

text-wrap balance y pretty, hyphens, font-feature-settings, y el ajuste óptico del texto.

balanceprettyhyphens

Color I Nivel 34 · sRGB, gamma y el problema

Por qué el degradado de azul a amarillo pasa por gris, qué es la gamma, y los límites de hex y hsl.

sRGBGammahsl

Color II Nivel 35 · OKLCH y los espacios perceptuales

Lightness, chroma y hue de verdad: por qué OKLCH permite paletas consistentes que hsl nunca pudo dar.

OKLCHPerceptualPaletas

Color III Nivel 36 · color-mix, colores relativos, gamut

Mezclar en el espacio que elijas, derivar colores con from, y el mapeo de gamut a P3 y a sRGB.

color-mixfromP3

Gradientes Nivel 37 · Interpolación, ángulos y cónicos

Lineales, radiales y cónicos, elegir el espacio de interpolación, y los degradados que no se ensucian.

Gradientesoklchconic

Fondos y bordes Nivel 38 · Capas, repetición y radios

El modelo de capas de background, background-clip, los radios elípticos y border-image.

backgroundclipradius

Sombras y profundidad Nivel 39 · box-shadow, drop-shadow, elevación

La diferencia real entre box-shadow y el filtro drop-shadow, y construir un sistema de elevación creíble.

Sombrasdrop-shadowElevación

Recorte y máscaras Nivel 40 · clip-path, mask, shape-outside

Recortar con formas y rutas, enmascarar con imágenes y gradientes, y hacer que el texto fluya alrededor.

clip-pathmaskshape-outside

Filtros y fusión Nivel 41 · filter, backdrop-filter, blend modes

El pipeline de filtros, el coste de backdrop-filter, y mix-blend-mode con los grupos de aislamiento.

filterbackdropblend

Transformaciones Nivel 42 · El pipeline 2D y 3D

Las propiedades individuales, el orden de las matrices, transform-origin, perspective y transform-style.

transformMatricesperspective

Contextos de apilamiento Nivel 43 · z-index y por qué no funciona

Qué crea un stacking context, la jerarquía real, y por qué tu z-index de 9999 sigue quedando debajo.

z-indexApilamientoisolation

Posicionamiento Nivel 44 · De static a fixed, y el bloque contenedor

Los cinco valores, qué es el containing block de cada uno, y cómo transform rompe a fixed.

positionContaining blockfixed

Sticky Nivel 45 · Cómo funciona de verdad

Las tres condiciones que debe cumplir, por qué falla con overflow hidden, y los patrones de cabecera pegajosa.

stickyoverflowCabecera

Anchor positioning Nivel 46 · Anclar sin JavaScript

anchor-name, position-anchor, la función anchor, position-try y el fallback cuando no cabe.

anchor()position-tryTooltip

La capa superior Nivel 47 · dialog, popover y el top layer

El elemento dialog modal, el atributo popover, light dismiss, y por qué el top layer mata al z-index.

dialogpopoverTop layer

Scroll Nivel 48 · Snap, overscroll y barras

scroll-snap como sistema, scroll-behavior, overscroll-behavior, scrollbar-gutter y scroll-margin.

snapoverscrollgutter

Formularios Nivel 49 · Estilar lo inestilizable

accent-color, field-sizing, appearance, el select personalizable, y los pseudo-elementos de cada control.

accent-colorfield-sizingselect

Arquitectura I Nivel 50 · De BEM a los tokens de diseño

La historia de las metodologías, qué problema resolvía cada una, y por qué los tokens ganaron.

BEMITCSSTokens

Arquitectura II Nivel 51 · Utility-first, CSS-in-JS y el estado del arte

Tailwind y su modelo, el declive del CSS-in-JS en runtime, y qué eligen los equipos en 2026.

TailwindCSS-in-JS2026

Sistemas de diseño en CSS Nivel 52 · Tokens, temas y modo oscuro

Construir una capa de tokens en tres niveles, temas con light-dark, y color-scheme.

Tokenslight-darkTemas

Rendimiento del CSS Nivel 53 · contain, content-visibility y el coste

Qué cuesta caro de verdad, contain y sus tipos, content-visibility, will-change y cuándo NO usarlo.

containcontent-visibilityCoste

Depurar CSS Nivel 54 · Las herramientas y el método

El panel de estilos, los overlays de grid y flex, la cascada computada, y un método para bugs de layout.

DevToolsOverlaysMétodo

Nivel Dios Nivel 55 · Síntesis del CSS moderno

La arquitectura completa de una hoja de estilos de 2026, el mapa de decisiones, y hacia dónde va el lenguaje.

SíntesisArquitecturaFuturo
280lecciones
56niveles
0→∞de cero a dios

¿Listo para dominar CSS Moderno?

Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.

Comenzar el camino →