CSS avanzado en WordPress: sistema de diseño con variables + clamp()

Tiempo de lectura: 2 minutos

Esto es especialmente potente si quieres que tu web sea consistente, mantenible y responsive sin depender de 50 media queries.

Un sistema de diseño no es solo “que se vea bonito”. Es tener reglas claras y reutilizables para:

• Colores
• Tipografía
• Espaciado
• Tamaños
• Breakpoints fluidos

En lugar de repetir valores por toda la hoja de estilos, vamos a centralizar todo en variables CSS y usar clamp() para que el diseño sea fluido entre móvil y escritorio.

Paso 1 – Añadir CSS en WordPress

Tienes varias opciones:

1. Apariencia → Personalizar → CSS adicional
2. En tu tema hijo (recomendado) dentro de style.css
3. En un archivo CSS propio si trabajas con un tema personalizado

Para este tutorial asumimos que lo añades en el CSS del tema hijo o en CSS adicional.

Paso 2 – Crear la base del sistema con variables CSS

Las variables se definen normalmente en :root, lo que las hace globales.

:root {

  /* Colores */
  --color-primary: #2563eb;
  --color-secondary: #1e293b;
  --color-accent: #f59e0b;
  --color-bg: #ffffff;
  --color-text: #0f172a;

  /* Escala tipográfica fluida */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  --text-xl: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);

  /* Espaciado fluido */
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 2rem);
  --space-lg: clamp(2rem, 1.5rem + 2vw, 4rem);

  /* Bordes */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

Qué hace clamp()

clamp(min, ideal, max) permite que un valor crezca de forma fluida según el ancho de la pantalla, pero sin hacerse ni demasiado pequeño ni demasiado grande.

Ejemplo:

font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);

Significa:

• Mínimo: 1rem
• Escala fluida con vw
• Máximo: 1.25rem

Resultado: tipografía adaptable sin media queries.

Paso 3 – Aplicar el sistema al body

Ahora usamos las variables para que todo el sitio herede coherencia.

body {
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  margin: 0;
}

Paso 4 – Tipografía consistente

h1 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

p {
  font-size: var(--text-base);
  margin-bottom: var(--space-sm);
}

Ahora todos los títulos escalan de forma fluida automáticamente.

Paso 5 – Botones reutilizables

Creamos un componente base.

.btn {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: white;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn:hover {
  background-color: var(--color-secondary);
}

Puedes usarlo en WordPress añadiendo la clase btn a un botón o enlace desde el editor de bloques.

Paso 6 – Contenedor con ancho fluido

.container {
  width: min(90%, 1200px);
  margin-inline: auto;
  padding: var(--space-md);
}

Esto evita que el contenido sea demasiado ancho en pantallas grandes.

Paso 7 – Sistema de tarjetas

.card {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: #f8fafc;
  margin-bottom: var(--space-md);
}

Puedes usarlo en bloques de grupo en Gutenberg añadiendo la clase card.

Ventajas de este sistema

1. Todo está centralizado en :root
2. Cambias una variable y afecta a toda la web
3. Menos media queries
4. Diseño fluido profesional
5. Escalable para proyectos grandes

Bonus – Modo oscuro automático

Puedes extender el sistema con prefers-color-scheme:

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a;
    --color-text: #f1f5f9;
    --color-secondary: #334155;
  }
}

Sin tocar componentes, todo cambia automáticamente.