Definir variables CSS desde el inicio cambia por completo cómo escalas un proyecto. Aprenderás a montar la base de un sitio responsivo usando OKLCH para colores, Clamp para tipografías fluidas y container queries para componentes adaptativos, sin depender tanto de media queries.

Por qué declarar variables CSS en el :root

Declarar las variables dentro del selector :root las hace accesibles en todo el proyecto. Esto centraliza decisiones de diseño y evita repetir valores en cada regla.

En el bloque inicial se definen cuatro grupos de variables que sostienen la coherencia visual:

• Colores principales en formato OKLCH, con un azul profundo, verde suave, casi negro y casi blanco.
• Tamaños de fuente con clamp() para que escalen según el viewport.
• Espaciados de XS a XL para mantener ritmo visual.
• Borde con border-radius de 8 píxeles como variable reutilizable.

¿Qué es OKLCH y por qué usarlo? Es un formato de color moderno que representa mejor la percepción humana. Te da colores más consistentes y predecibles que hex o rgb, sobre todo al mezclarlos.

Cómo funciona Clamp para tipografías responsivas

La función clamp() recibe tres valores: mínimo, preferido y máximo. El valor preferido suele apoyarse en unidades como vw para que el navegador interpole según el ancho de pantalla [02:00].

Por ejemplo, una fuente puede crecer entre un mínimo en rem y un máximo en rem, usando 0.5vw como referencia intermedia. El resultado: tipografía fluida sin escribir media queries.

Cómo aplicar el reset básico y los estilos del body

Antes de estilar componentes, conviene neutralizar los valores por defecto del navegador. El reset clásico aplica a todos los selectores margin: 0, padding: 0 y box-sizing: border-box [03:50].

Esto obliga al navegador a partir desde cero y te deja a ti definir el comportamiento real.

En el body se asignan las variables ya creadas:

• font-family con la fuente recomendada por Visual Studio Code.
• line-height: 1.6 para legibilidad.
• color con la variable de color oscuro.
• background con la variable de color claro para asegurar contraste.

Cómo controlar imágenes que se desbordan

Las imágenes sin estilo rompen el layout. Aplicar max-width: 100%, height: auto y display: block [04:50] hace que se ajusten al contenedor y se comporten como bloques predecibles.

¿Por qué usar display block en imágenes? Por defecto las imágenes son inline y dejan un pequeño espacio inferior. Con block eliminas ese espacio fantasma y controlas mejor el flujo.

Cómo configurar un contenedor con container queries

Los container queries permiten que un componente reaccione al tamaño de su contenedor, no al del viewport. Para activarlos necesitas dos propiedades clave [05:30]:

• container-type: inline-size para observar el ancho del contenedor.
• container-name con un nombre descriptivo, por ejemplo principal.

El contenedor principal usa width: 100% con max-width: 1200px, márgenes verticales en cero y horizontales automáticos para centrarlo. El padding se toma de la variable de espaciado mediano.

Sin estas dos líneas de configuración, las consultas de contenedor que escribas más adelante no funcionarán.

Cómo estilar la cabecera y la navegación con Flexbox

La sección cabecera recibe un padding con la variable de espaciado grande y text-align: center para centrar su contenido [07:10].

La barra de navegación usa Flexbox para distribuir el logo y los enlaces:

• display: flex para alinear elementos en fila.
• justify-content: space-between para empujar el logo y los enlaces a los extremos.
• align-items: center para alinearlos verticalmente.
• padding vertical pequeño y horizontal mediano.
• border-radius desde la variable creada al inicio.

¿Cuándo usar space-between en Flexbox? Cuando tienes dos o más elementos y quieres máximo espacio entre ellos, manteniendo los extremos pegados a los bordes del contenedor.

Cómo mezclar colores con color-mix y variables

La función color-mix() permite combinar dos colores en un espacio cromático específico. Aquí se usa oklab como espacio para mantener coherencia con el sistema OKLCH [08:50].

La mezcla se arma así: 15% de la variable de color primario más la variable de color claro completando el porcentaje restante. El resultado es un fondo sutil que conserva la identidad de la paleta sin crear una variable nueva.

Cómo aplicar pseudoclase :is en estados hover y focus

Los enlaces de navegación reciben tratamiento con Flexbox y separación entre ellos mediante gap con una variable de espaciado [10:00].

Cada <a> recibe:

• color desde la variable oscura.
• text-decoration: none para quitar el subrayado.
• padding con variables.
• border-radius heredado de la variable global.
• transition: all 0.3s ease para animar cambios.

Para los estados interactivos se usa la pseudoclase :is(), que agrupa selectores y simplifica la sintaxis. Con :is(:hover, :focus) se aplica un background-color con el color primario y el texto pasa al color claro [11:20].

Esta combinación cubre tanto la interacción con mouse como la navegación por teclado, mejorando accesibilidad sin duplicar reglas.

¿Cómo estás organizando tus variables CSS en tus proyectos? Cuéntame en los comentarios qué sistema de tokens te ha funcionado mejor.