Variables, temas y organización

⏱ 45 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Crear un sistema de diseño con variables CSS.
Implementar un tema claro y oscuro sin duplicar estilos.
Usar calc(), clamp() y color-mix() para valores derivados.
Organizar y mantener un CSS grande.

1.Variables CSS (custom properties)

Una variable CSS guarda un valor con un nombre para reutilizarlo y cambiarlo en un solo lugar. Se declara con dos guiones y se usa con var():

Declarar y usar

:root {
  --color-principal: #4f46e5;
  --espacio: 1rem;
  --radio: 12px;
}

.boton {
  background: var(--color-principal);
  padding: var(--espacio);
  border-radius: var(--radio);
}

:root es el elemento raíz (html) con mayor alcance: las variables ahí valen para toda la página.
Los nombres distinguen mayúsculas: --Color y --color son distintos.
var(--x, valor) admite un valor de respaldo si la variable no existe: var(--color, black).
A diferencia de las variables de Sass, las de CSS siguen vivas en el navegador: se pueden cambiar con JavaScript, en media queries y en estados.

Alcance: las variables también «heredan»

✏️ Variables locales

Código (edítalo)

<style>
  :root { --color: #4f46e5; --radio: 10px; }
  .caja { background: var(--color); color: #fff; padding: 14px; border-radius: var(--radio); margin: 8px 0; }
  .especial { --color: #e11d48; }      /* cambia solo dentro de este elemento */
</style>
<div class="caja">Usa el color de :root</div>
<div class="caja especial">Redefine --color localmente</div>
<div class="especial"><div class="caja">Y sus descendientes la heredan</div></div>

Resultado

💡 Consejo · Nombra por función

Mejor --color-fondo, --color-texto, --color-acento que --azul o --gris-claro: si mañana el acento pasa a ser verde, el nombre sigue siendo cierto. Es la misma idea que los nombres de clase por función.

2.Un sistema de diseño en variables

Con variables puedes definir todas las decisiones visuales de un sitio en un solo bloque:

Tokens de diseño

:root {
  /* color */
  --fondo: #f7f8fc;     --superficie: #ffffff;
  --texto: #1e2235;     --texto-suave: #5b6280;
  --acento: #4f46e5;    --borde: #dde2ef;

  /* espacio y forma */
  --e-1: .25rem; --e-2: .5rem; --e-3: 1rem; --e-4: 2rem;
  --radio: 12px;
  --sombra: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .08);

  /* tipografía */
  --fuente: system-ui, sans-serif;
  --t-base: 1.0625rem; --t-grande: 1.5rem;
}

body { background: var(--fondo); color: var(--texto); font: var(--t-base)/1.6 var(--fuente); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-3); }

Si el cliente pide otro azul o más redondeo, cambias una línea y todo el sitio se actualiza.

3.Modo oscuro con variables

El modo oscuro es el mejor ejemplo del valor de las variables: solo redefines los colores; el resto del CSS no se toca. Hay tres piezas:

Define los colores claros en :root.
Redefínelos dentro de @media (prefers-color-scheme: dark) (respeta la preferencia del sistema).
Añade además [data-tema="oscuro"] para permitir un botón que cambie el tema a mano.

Tema claro y oscuro

:root {
  --fondo: #f7f8fc;
  --texto: #1e2235;
  --superficie: #ffffff;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0f1222;
    --texto: #e8eaf6;
    --superficie: #181c33;
    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --fondo: #0f1222;
  --texto: #e8eaf6;
  --superficie: #181c33;
  color-scheme: dark;
}

color-scheme: dark hace que los controles nativos (campos, barras de desplazamiento) también se vean oscuros.
En vez de invertir los colores, diseña el tema oscuro: usa grises azulados en vez de negro puro y baja un poco la saturación.
Comprueba el contraste en ambos temas.

✏️ Cambia entre temas

Código (edítalo)

<style>
  :root { --fondo: #f7f8fc; --texto: #1e2235; --superficie: #fff; --acento: #4f46e5; color-scheme: light; }
  [data-tema="oscuro"] { --fondo: #0f1222; --texto: #e8eaf6; --superficie: #181c33; --acento: #a5a2ff; color-scheme: dark; }
  body { margin: 0; padding: 16px; background: var(--fondo); color: var(--texto); font-family: system-ui; transition: background .3s, color .3s; }
  .t { background: var(--superficie); border-radius: 12px; padding: 14px; border: 1px solid #8884; }
  a { color: var(--acento); }
</style>
<body data-tema="claro">
  <div class="t"><strong>Tarjeta</strong><p>Cambia <code>data-tema="claro"</code> por <code>"oscuro"</code> en la etiqueta body.</p><a href="#">Un enlace</a></div>
</body>

Resultado

📌 Nota · Así funciona el tema de este sitio

Este curso usa exactamente este patrón: variables en :root, un bloque prefers-color-scheme: dark y un atributo data-theme que cambia el botón «Tema» (con un poco de JavaScript, que verás en el curso de JavaScript).

4.Funciones de CSS que conviene dominar

Función	Para qué	Ejemplo
`calc()`	Operar con unidades distintas	`width: calc(100% - 2rem)`
`min()` / `max()`	El menor / el mayor de varios valores	`width: min(100%, 60ch)`
`clamp()`	Valor entre un mínimo y un máximo	`font-size: clamp(1rem, 2.5vw, 2rem)`
`var()`	Usar una variable	`color: var(--acento, #4f46e5)`
`color-mix()`	Mezclar colores	`color-mix(in srgb, var(--acento) 20%, white)`
`attr()`	Leer un atributo HTML	`content: attr(data-etiqueta)`
`url()`, `rgb()`, `hsl()`	Referencias y colores

Derivar colores desde uno solo

:root { --acento: #4f46e5; }

.boton       { background: var(--acento); }
.boton:hover { background: color-mix(in srgb, var(--acento) 85%, black); }
.suave       { background: color-mix(in srgb, var(--acento) 12%, white); }

✏️ Mezclar colores

Código (edítalo)

<style>
  :root { --acento: #4f46e5; }
  .f { display: flex; gap: 8px; }
  .f div { width: 80px; height: 60px; border-radius: 10px; display: grid; place-items: center; font-size: .75rem; color: #fff; }
  .a { background: var(--acento); }
  .b { background: color-mix(in srgb, var(--acento) 80%, black); }
  .c { background: color-mix(in srgb, var(--acento) 50%, white); color: #1e2235 !important; }
  .d { background: color-mix(in srgb, var(--acento) 12%, white); color: #1e2235 !important; }
</style>
<div class="f"><div class="a">base</div><div class="b">oscuro</div><div class="c">claro</div><div class="d">fondo</div></div>
<p>Cambia <code>--acento</code> y mira cómo toda la familia de tonos se actualiza.</p>

Resultado

5.Organizar tu CSS

Un CSS de 20 líneas se entiende solo. Uno de 2000 necesita orden. Una estructura que funciona:

Tokens y variables (:root).
Reseteo y base: box-sizing, body, tipografía, enlaces.
Layout: contenedores, cuadrículas, cabecera y pie.
Componentes: .tarjeta, .boton, .menu… cada uno con su bloque.
Utilidades y estados: .oculto, .centrado, variantes.
Media queries al final (o junto a cada componente).

Nombres: BEM

Bloque, elemento, modificador

.tarjeta { … }                   /* bloque */
.tarjeta__titulo { … }           /* elemento */
.tarjeta--destacada { … }        /* modificador */

Capas con @layer

@layer te permite decidir qué grupo de reglas gana sin pelear con la especificidad:

Capas de CSS

@layer reset, base, componentes, utilidades;

@layer reset       { *, *::before, *::after { box-sizing: border-box; } }
@layer componentes { .boton { background: var(--acento); } }
@layer utilidades  { .oculto { display: none; } }   /* gana a las capas anteriores */

Anidamiento nativo

Sin Sass

.tarjeta {
  padding: 1rem;
  border: 1px solid var(--borde);

  & h2 { margin-top: 0; }
  &:hover { box-shadow: var(--sombra); }
  @media (min-width: 700px) { padding: 2rem; }
}

📌 Nota · ¿Y Sass o Tailwind?

Muchos proyectos usan preprocesadores (Sass) o frameworks (Tailwind, Bootstrap). Con variables, anidamiento y capas nativas, CSS cubre hoy casi todo lo que Sass ofrecía. Aprender CSS a fondo, como en este curso, te sirve con cualquiera de ellos.

6.Buenas prácticas de mantenimiento y rendimiento

Un solo archivo CSS para el sitio (o pocos), enlazado en el <head>.
Evita repetir valores: si lo escribes tres veces, que sea una variable.
Selectores simples y cortos; evita anidar más de 2–3 niveles.
Comenta el «por qué», no el «qué»: /* iOS necesita esto por… */.
Elimina el CSS que no se usa. Con las herramientas de desarrollo (pestaña Coverage) puedes detectarlo.
Minifica en producción y activa la compresión del servidor.
Prueba en varios navegadores y revisa cada propiedad nueva en caniuse.com.
Usa @supports para ofrecer una alternativa cuando una propiedad moderna no exista.

Alternativa con @supports

.galeria { display: flex; flex-wrap: wrap; gap: 1rem; }       /* respaldo */

@supports (display: grid) {
  .galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

7.Errores frecuentes

Escribir var(--x) fuera de una propiedad válida o con un nombre mal escrito: la declaración se descarta sin avisar.
Declarar variables en un selector que no alcanza a los elementos que las usan.
Cambiar a tema oscuro invirtiendo los colores y dejando un contraste pésimo.
Olvidar color-scheme: dark: los campos y barras de desplazamiento siguen claros.
Variables con nombres según el valor (--azul) que luego dejan de ser azules.
Convertir todo en variable: demasiadas variables hacen el código más difícil de seguir. Solo lo que se repite o puede cambiar.
No poner un valor de respaldo en var() cuando la variable la define JavaScript.

📒 Apuntes para llevar

Las variables CSS (--nombre) se declaran en :root y se usan con var(--nombre, respaldo); se pueden redefinir localmente.
Un sistema de diseño reúne colores, espacios, radios y tipografías en variables para cambiar el sitio entero en una línea.
El modo oscuro redefine solo las variables de color: prefers-color-scheme: dark y un atributo data-tema para elegir a mano; añade color-scheme.
calc(), min(), max(), clamp() y color-mix() ayudan a calcular y derivar valores.
Ordena el CSS: variables → base → layout → componentes → utilidades → media queries.
BEM, @layer y el anidamiento nativo evitan batallas de especificidad.
@supports ofrece alternativas cuando una propiedad es nueva.
Mantén el CSS pequeño: evita duplicados, elimina lo que no uses y minifica.

8.Glosario

Término	Significado
Variable CSS	Valor con nombre (`--x`) que se reutiliza con `var(--x)`.
`:root`	Selector del elemento raíz; ideal para variables globales.
Token de diseño	Decisión visual con nombre: color, espacio, radio…
`color-scheme`	Indica a los controles nativos si el tema es claro u oscuro.
`color-mix()`	Función que mezcla dos colores en una proporción.
`@layer`	Agrupa reglas en capas con prioridad explícita.
BEM	Convención de nombres: Bloque__Elemento--Modificador.
`@supports`	Aplica estilos solo si el navegador entiende una propiedad.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Cómo se declara y se usa una variable CSS?

Se declara con dos guiones y se usa con var().

¿Dónde se declaran normalmente las variables globales?

:root es el elemento raíz y las hereda toda la página.

Para el modo oscuro, lo más práctico con variables es…

¿Para qué sirve color-scheme: dark?

¿Qué hace var(--color, black) si --color no existe?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio