Hoy en día, herramientas como Tailwind CSS dominan el desarrollo frontend. Aunque son increíblemente útiles para prototipar rápido y mantener consistencia, a veces pueden limitar la creatividad o hacer que todos los sitios web se vean idénticos.

Volver a Vanilla CSS hoy en día no significa escribir estilos desordenados como en 2012. El CSS moderno cuenta con capacidades potentes que permiten crear sistemas de diseño modulares, expresivos y de alta calidad.

El Poder de HSL Dinámico

Declarar colores usando HSL (Hue, Saturation, Lightness) en conjunto con Variables CSS abre un abanico inmenso de posibilidades interactivos:

:root {
  --accent-hue: 73;
  --accent-saturation: 100%;
  --accent-lightness: 62%;
  
  /* Color base */
  --accent-color: hsl(var(--accent-hue), var(--accent-saturation), var(--accent-lightness));
  
  /* Variante translúcida para hovers o sombras */
  --accent-color-hover: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 0.15);
}

Al separar los canales cromáticos, podemos ajustar opacidades o derivar tonalidades directamente en el CSS sin tener que duplicar variables de color hexadecimales rígidas.

Selectores Modernos y Layouts Fluidos

Con la llegada de funciones como @container (Container Queries) y selectores como :has(), la forma en que estructuramos componentes ha cambiado por completo:

  • Container Queries: Permiten que un componente modifique su layout basándose en el ancho de su contenedor inmediato, no de la pantalla completa (viewport).
  • El selector :has(): Permite dar estilos a un elemento padre basándose en el estado de sus hijos. Por ejemplo, cambiar el fondo de una tarjeta si contiene un enlace enfocado o un botón activo.

Conclusión

El uso estratégico de Vanilla CSS nos devuelve el control artístico absoluto del layout. Nos permite alejarnos de la estética prefabricada y construir interfaces digitales que se sienten más como piezas editoriales únicas que como aplicaciones web genéricas.