Guía para principiantes de variables CSS (también conocidas como propiedades personalizadas de CSS)

Tabla de contenido:

• Variables CSS en preprocesadores #
• Variables (Propiedades personalizadas) en CSS nativo #
• ¿Por qué "Propiedades personalizadas"? #
• ¿Dónde se definen las variables CSS? #
• Notas técnicas sobre variables CSS #
• Entendiendo la función var() #
• Uso de variables CSS con calc() #
• Trucos con Variables CSS #

Variables CSS en preprocesadores

Los preprocesadores CSS han estado usando Variables CSS durante más de 10 años. No entraré en detalles sobre esas opciones aquí, pero creo que es útil saber cómo cada una de las bibliotecas de preprocesadores populares usa variables.

En Sass (o SCSS), declara variables de la siguiente manera:

Observe el signo de dólar ($). La primera línea es la declaración de la variable y su valor. Los dos bloques que siguen son ejemplos de las variables que se usan más adelante en la hoja de estilo.

Las variables en Less.js usan el símbolo @ :

Y en Stylus las variables se ven así:

Puede consultar las secciones de documentación individuales para cada uno de los preprocesadores que se muestran arriba si desea profundizar en las variables que utilizan estas tecnologías de terceros.

Variables (Propiedades personalizadas) en CSS nativo

Esto nos lleva a las variables CSS, o propiedades personalizadas, tal como están definidas en la especificación CSS. Para declarar una variable en CSS simple, coloque dos guiones delante del nombre personalizado que elija para la variable o propiedad, luego use la función var() para colocar ese valor donde desee:

En este ejemplo, he definido dos variables CSS: --main y --accent . Luego usé cada variable CSS en dos elementos diferentes, demostrando la flexibilidad que abren.

Al igual que con las variables en cualquier lenguaje de programación, esto le permite declarar una variable en un solo lugar. Si luego desea cambiar ese valor en todas partes de su hoja de estilo, es simplemente cuestión de cambiar la declaración original y se aplicará a todos los lugares donde use la variable.

¿Por qué "Propiedades personalizadas"?

En las conversaciones cotidianas, los desarrolladores a menudo se refieren a esta función como "variables CSS", en línea con la forma en que los preprocesadores y los lenguajes de programación se refieren a la misma función. Pero desde una perspectiva estrictamente técnica, estas no son realmente "variables" sino Propiedades personalizadas .

Tienen la misma sintaxis que cualquier propiedad predefinida en CSS, excepto por los dos guiones que aparecen delante del nombre de la propiedad. Los dos guiones permiten que los autores de CSS usen cualquier identificador de guiones válido sin temor a conflictos con las propiedades regulares de CSS.

La especificación explica que dos guiones solos no son válidos (aparentemente reservados para uso futuro) y CSS nunca le dará significado a ningún identificador de guiones válido más allá de su uso como una propiedad personalizada definida por el autor.

A diferencia de las propiedades CSS normales, las propiedades personalizadas distinguen entre mayúsculas y minúsculas. Esto significa --main-color no es lo mismo que --Main-Color . Los caracteres válidos para incluir en el nombre de la propiedad personalizada son letras, números, guiones bajos y guiones.

¿Dónde se definen las variables CSS?

Como puede ver en el ejemplo que proporcioné anteriormente, a menudo verá propiedades personalizadas de CSS definidas directamente en el elemento raíz de un documento HTML o shadow DOM. El selector de pseudo-clase :root logra esto.

Pero las variables CSS no se limitan a definirse únicamente en el elemento raíz y, a menudo, es beneficioso definirlas en otro lugar. El selector :root se elige comúnmente porque siempre apunta al elemento superior en el árbol DOM (ya sea el documento completo o el DOM oculto).

En la mayoría de los casos, obtendrá el mismo resultado al definir propiedades personalizadas en el elemento html (que es el elemento raíz en los documentos HTML) o incluso en el elemento del body . El uso de :root permite que el código esté más preparado para el futuro (por ejemplo, si la especificación un día agrega un nuevo elemento como raíz, el CSS permanecería igual) y supongo que también permite que una hoja de estilo se aplique a un tipo diferente de documento que tiene un elemento raíz diferente.

Por ejemplo, el siguiente código limitaría sus propiedades personalizadas para usarlas solo en el elemento .sidebar :

Para fines de demostración, a menudo verá variables definidas en :root , pero puede usarlas en cualquier lugar que sea práctico. De hecho, muchos desarrolladores recomiendan configurarlos más abajo en el árbol DOM para módulos más pequeños durante el desarrollo inicial, y luego avanzar hacia :root a medida que crea valores que tienen un alcance mayor.

Notas técnicas sobre variables CSS

Además de poder aplicarse a cualquier elemento, las Variables CSS son bastante flexibles y fáciles de manejar.

Aquí hay algunas cosas que vale la pena señalar:

• Se resuelven con herencia CSS normal y reglas en cascada.
• Puede usarlos en consultas de medios y otras reglas condicionales
• Puede definirlos en el atributo de style de un elemento.
• Se pueden leer o configurar mediante funciones del modelo de objetos CSS.

También es notable que esencialmente puede anidar variables CSS. Tenga en cuenta el siguiente ejemplo:

Observe que he definido una variable --main-color luego estoy usando ese mismo nombre de variable como valor para la siguiente variable CSS.

También puede usar la palabra clave !important en un valor de variable CSS, pero esto solo aplica la "importancia" a la variable en sí en relación con otras definiciones de variables y no al valor que se usa en uno o más elementos en el documento. Si esto es confuso, aquí hay un ejemplo:

En el ejemplo anterior, el color de fondo sería "azul claro", aunque el naranja aparece más adelante en las definiciones de variables. Pero el valor de fondo en sí mismo en el elemento del body no tendría ninguna importancia.

Las variables CSS también pueden contener valores de palabras clave de todo el CSS como initial , inherit y unset pero la propiedad all no afecta a las variables CSS (es decir, no se restablecen).

Entendiendo la función var()

Ya ha visto la función var() utilizada en algunos ejemplos típicos en este tutorial de variables CSS. Pero hay más en var() de lo que he cubierto hasta ahora.

Primero, la función var() es válida solo en un valor; un nombre de propiedad o selector no puede usar una variable CSS. Además, un valor de consulta de medios no puede usar una variable CSS (por ejemplo @media (max-width: var(--my-var)) no es válido).

La función var() toma dos argumentos:

• El nombre de la propiedad personalizada que se incluirá
• Un valor alternativo en caso de que la propiedad personalizada no sea válida

Aquí hay un ejemplo donde el segundo argumento tiene efecto:

Observe que en el código anterior he escrito el nombre de la variable inicial usando la palabra británica o canadiense "color", pero cuando usé la variable incorporé la ortografía estadounidense "color". Esto hace que la variable sea técnicamente inválida y, por lo tanto, el fondo gris simple ( #ccc ) tiene efecto en su lugar.

Tenga en cuenta también que un valor alternativo puede contener sus propias comas. Entonces, por ejemplo, si su respaldo es una pila de fuentes, esta sería una forma válida de definirlo:

Note nuevamente que mi variable tiene una falla, declarando un --main-type desconocido en lugar de --main-font . Esto activa el valor de reserva, que es una pila de fuentes alternativa. Por lo tanto, todo lo que sigue a la primera coma (incluso si se incluyen otras comas) es el valor de reserva.

Uso de variables CSS para parciales

Al definir una variable CSS, el valor que contiene no tiene que ser un valor CSS válido en sí mismo; puede ser un valor parcial que se puede utilizar como parte de un valor completo.

Por ejemplo, puede dividir una pila de fuentes:

En este caso, cada uno de los valores de las variables funciona por sí solo, pero demuestra el punto. Probemos un ejemplo más artificial usando la notación de color rgba() :

Puede ver cuán útil podría ser esto, permitiéndole esencialmente "construir" valores dinámicamente.

Uso de variables CSS con calc()

Una de las formas útiles de incorporar variables CSS en sus proyectos es en conjunción con la función calc() . Como sabrá, calc() le permite realizar cálculos dentro de un valor. Así que puedes hacer algo como esto:

Las propiedades personalizadas de CSS le permiten llevar calc() al siguiente nivel, por ejemplo, con tamaños predefinidos. Ahmad Shadeed describió algo similar y aquí hay un ejemplo:

Con esto en su lugar, puedo usar los conjuntos de reglas .module y .module-* dentro de las consultas de medios, lo que me permite mostrar esos estilos condicionalmente para tamaños de ventana gráfica específicos u otras funciones de medios. Los módulos pequeño/mediano/grande tendrían las mismas clases que el módulo principal, pero solo se sobrescribe el tamaño del módulo según sea necesario. En el ejemplo anterior, el valor inicial de 240 para el tamaño actúa como una especie de valor predeterminado, pero también podría pasar 240 240px como segundo argumento en var() para que funcione como respaldo.

Trucos con variables CSS

Varios desarrolladores han compartido consejos y trucos con el uso de variables CSS a lo largo de los años. No me extenderé en detalle aquí ya que este es principalmente un tutorial para principiantes, pero aquí hay un resumen rápido de algunos:

• Como mencioné anteriormente, puede usar variables CSS en estilos en línea, como en el caso de los cuadros de relación de aspecto.
• Un carácter de espacio es un valor válido para una variable CSS, que le permite hacer un truco de encendido/apagado (por ejemplo, para algo como el modo oscuro), sobre el que puede leer en la publicación de Lea.
• No puede escribir estilos flotantes en estilos en línea, pero puede evitar esto usando variables CSS.
• Las variables CSS ayudan a crear SVG de varios colores más fácilmente, como se describe aquí.
• Puede crear sistemas y temas de diseño prácticos y fáciles de mantener con variables CSS, que se explican en detalle en esta publicación.
• Puede usar variables CSS para crear cuadrículas más eficientes y mantenibles mediante las funciones de diseño de cuadrícula, tal como lo describe Michelle Barker.

Conclusión

Las variables CSS, o propiedades personalizadas de CSS, están listas para usar hoy en día con más del 90% de los navegadores en uso a nivel mundial que admiten esta práctica función. Espero que esta discusión sobre los conceptos básicos y la sintaxis lo anime a considerar las variables CSS en sus proyectos más recientes, si aún no lo ha hecho.

Si su uso de variables CSS se ha limitado a algunos colores de temas globales, tal vez este tutorial lo inspire a hacer un mayor uso de ellos y posiblemente invente algunos trucos propios.

Ahora que ha terminado con las variables CSS, consulte algunas de nuestras otras guías:

• Diseño de cuadrícula CSS
• Introducción a Parcel.js
• Tutorial de caja flexible de CSS
• Paquete web para principiantes
• Tutorial de microinteracciones para desarrolladores principiantes

En caso de que tenga alguna pregunta con respecto a este tutorial de variables CSS, no dude en enviarla en los comentarios a continuación.

Diseño y presentación por Chris Fitzgerald y Karol K.