Cómo crear fácilmente temas con variables CSS

Uno de los mejores casos de uso de las variables CSS es la creación de temas. Y con eso, no solo me refiero a cambiar los temas de toda la aplicación, ya que probablemente no sea algo que deba hacer con mucha frecuencia. Lo que es más relevante es la capacidad de crear fácilmente temas específicos de componentes.

Esto podría suceder, por ejemplo, cuando necesite marcar un producto de comercio electrónico como agregado al carrito. O tal vez su sitio tiene una sección de administración que incluye una sección de barra lateral más oscura.

Las variables CSS le permiten hacer esto de una manera más simple y flexible de lo que era posible anteriormente. En este artículo, explicaré exactamente cómo.

También he creado un screencast sobre la creación de temas en mi curso gratuito de variables CSS de 8 partes. Si está interesado en obtener más información sobre el curso, consulte este artículo.

La puesta en marcha

Trabajaremos con un sitio de cartera como ejemplo. Nuestro objetivo es poder presentar uno de los proyectos en nuestro portafolio para que se destaque del resto de la multitud. Técnicamente, haremos esto agregando una clase al elemento específico que queremos presentar.

Así es como se ve inicialmente el sitio de la cartera:

No me molestaré en hablar sobre HTML para el sitio, ya que es bastante sencillo y supongo que conoces HTML. Sin embargo, si está interesado en jugar con el código, aquí he creado un campo de juego de Scrimba.

Ahora, vayamos directamente al CSS. Aquí está nuestra hoja de estilo antes de que empecemos a usar variables CSS:

html, body { background: #ffeead; color: #ff6f69; } h1, p { color: #ff6f69; } #navbar a { color: #ff6f69; } .item { background: #ffcc5c; } button { background: #ff6f69; color: #ffcc5c; } 

Como se puede ver, sólo estamos usando tres colores aquí: #ffeead, #ff9f96y #ffcc5c. Sin embargo, los estamos reutilizando mucho. Así que este es un caso de uso perfecto para las variables CSS.

Para comenzar a usarlo, primero necesitaremos declarar nuestras variables. Haremos eso en la :rootpseudo-clase:

:root { --red: #ff6f69; --beige: #ffeead; --yellow: #ffcc5c; } 

Luego, simplemente intercambiaremos nuestros valores hexadecimales con las variables:

html, body { background: var(--beige); color: var(--red); } h1, p { color: var(--red); } #navbar a { color: var(--red); } .item { background: var(--yellow); } button { background: var(--red); color: var(--yellow); } 

Ahora tenemos el poder de las variables en nuestro CSS, lo que significa que simplemente podemos cambiarlo --reda otra cosa, y se actualizará en todo nuestro sitio.

Si tiene dificultades para comprender lo que sucede aquí, consulte mi artículo Aprenda las variables CSS en 5 minutos o inscríbase en el curso.

Creando un tema

Ahora creemos el tema. Queremos tener la capacidad de agregar una .featuredclase a uno de nuestros cuatro elementos del proyecto y, por lo tanto, hacer que ese elemento se destaque del resto. Específicamente, cambiaremos de rojo a #ff5564amarillo #ffe55b.

Así es como se verá en el marcado:

project d

learn more

Este cambio debería afectar el estilo en cuatro lugares diferentes:

  • color de fondo del
  • color del

  • color de fondo del
  • color del

El viejo camino

La forma en que tuvimos que resolver esto anteriormente fue creando un selector CSS personalizado para cada elemento dentro del .featuredelemento, como este:

.featured { background: #ffe55b; } .featured > h1 { color: #ff5564; } .featured > button { background: #ff5564; color: #ffe55b; } 

Este enfoque no es muy flexible. Si tuviera que agregar otro elemento dentro de los elementos de su cartera, también tendría que escribir selectores específicos para ellos.

La nueva forma

Con las variables CSS, sin embargo, se vuelve mucho más fácil. Simplemente anularemos las variables dentro de .featureduna clase como esta:

.featured { --yellow: #ffe55b; --red: #ff5564; } 

Como las Variables CSS se heredan, todos los elementos dentro de los .featuredcuales hacen referencia --redo --yellowahora usan los valores locales y no los globales. Entonces el o

Los elementos utilizan automáticamente los valores locales para las variables.

Así es como se desarrolla en la página.

Como puede ver, el elemento 'proyecto d' se ve un poco diferente al resto.

Como puede ver, el elemento 'proyecto d' se ve un poco diferente al resto.

¿Limpio o qué?

Piense en cómo sería esto si estuviéramos creando un componente más complejo, por ejemplo, un artículo de producto en una aplicación de comercio electrónico. Puede incluir títulos, subtítulos, párrafos, imágenes, leyendas, botones, clasificaciones y mucho más. Es mucho más fácil y flexible simplemente invertir el valor de algunas variables en lugar de crear selectores personalizados para cada uno de los descendientes.

Si está interesado en obtener más información sobre esta tecnología, consulte mi curso interactivo gratuito de 8 partes sobre Variables CSS en Scrimba.

¡Gracias por leer! Mi nombre es Per Borgen, soy el cofundador de Scrimba, la forma más fácil de aprender a codificar. Debe consultar nuestro bootcamp de diseño web receptivo si desea aprender a construir un sitio web moderno a nivel profesional.