Variables nativas de CSS

en

por el

Las variables nativas de CSS son reglas de CSS o valores personalizados que podemos utilizar a nuestro antojo en la hoja de estilos. Mediante estas variables podemos crear una propiedad con el nombre que elijamos y llamarla tantas veces como sea necesario para que actúe en nuestros selectores.

Para crearlas simplemente insertamos una línea de código así:
:root {--MiColor: #CCCCCC;}

Y utilizarlas es tan sencillo como:
body {background-color: var(--MiColor);}

En el ejemplo, hemos almacenado un valor que hace referencia a un color. Podremos utilizar esta variable siempre y cuando la propiedad CSS que estemos creando admita un color como valor.

Imagina si creas todas estas variables:

:root {
–colorFondoBody:#ffffff;
–colorFondoElementos:#f9f9f9;
–colorTexto: #5c7277;
–colorEncabezados:#263238;
–colorPrimario: #10b297;
–colorPrimario2:#087c66;
–colorSecundario:#ff8877;
–colorSecundario2:#e86456;
–colorTerciario:#999999;
–colorTerciario2:#7a7a7a;
–fuenteEncabezados:”Palatino Linotype”, “Book Antiqua”, Palatino, serif;
–fuenteCuerpoTexto:sans-serif;
–fuenteBloques:serif;
–sombraCaja: 0px 25px 50px 0 rgba(0,0,0,0.10);
–sombraCaja2: 0px 0 50px 0 rgba(0,0,0,0);
–sombraCaja3: 0px 25px 50px 0 rgba(0,0,0,0.20);
}

La versatilidad que obtienes para personalizar tu hoja de estilo es enorme. Puedes prever una gran cantidad de propiedades y editarlas posteriormente sólamente cambiando los parámetros de esas variables.

Esto ayuda también a tener una consistencia visual en cuanto al diseño de todos los elementos de una web. Aquí tienes el control de cuantas tipografías, colores, etc., estás usando y así es fácil no crear estilos de más y la apariencia de tu web tendrá una uniformidad gráfica.

Los que conozcan preprocesadores de CSS como SASS o LESS reconocerán esta tecnología. Ya era posible almacenar valores en variables personalizadas, pero hacerlo con CSS plano nos da una ventaja sobre los preprocesadores y es que podemos ver los cambios en tiempo real.

Por ejemplo, podremos combinar esta herramienta con JavaScript para que sea el propio usuario el que modifique el estilo de la web a su antojo. Pero esta es sólo una de las ventajas que nos ofrecen las variables nativas de CSS. Tanto con CSS plano como con la ayuda de JavaScript podemos hacer cosas realmente útiles.


También puede interesarte:


Deja un comentario