Las propiedades personalizadas o también conocidas como variables en CSS son entidades definidas por autores de CSS que contienen valores específicos que se pueden volver a utilizar en todo el archivo o documento de extensiones CSS y JS.
Requisitos:
- Visual Studio Code
- HTML5 y CSS3
- JavaScript
Lo que veremos en este tutorial:
- ¿Que son las propiedades personalizadas en CSS?
- Declarando propiedades personalizadas CSS (variables).
- Acceder a las variables CSS.
- Variables fallback (alternativo) CSS.
- Aplicando variables CSS desde JavaScript.
- Conclusiones.
- Referencias.
1. ¿Que son las propiedades personalizadas en CSS?
Las propiedades personalizadas o variables en CSS se establecen mediante la notación de propiedades personalizadas (por ejemplo, --main-color: black;) y se acceden mediante la función var() (por ejemplo, color: var (--main-color);). Normalmente los sitios web complejos tienen varias cantidades de CSS en gran volumen, con una gran cantidad de valores repetidos. Por ejemplo, el mismo color se puede utilizar en varias secciones del sitio web, lo cual requiere mayor trabajo en buscar y reemplazar cuando se necesita cambiar el color.
Las variables CSS permiten que un valor se almacene en un lugar y luego se haga referencia en varios otros lugares. Un beneficio adicional son los identificadores semánticos. Por ejemplo --main-text-color es más fácil de entender que #000000, especialmente si este mismo color también se utiliza en otro contexto al diseñar el sitio web.
2. Declarando propiedades personalizadas CSS (variables).
Las variables se declaran con un prefijo formado por dos guiones (--), seguidos del nombre que queramos para nuestra variable, dos puntos (:), el valor que queramos guardar y se finaliza con un punto y coma (;). Por ejemplo: --variable: valor;
Las variables se usan dentro de una regla CSS. Hay que tener en cuenta que el selector que usemos definirá el ámbito (scope) en el que podremos usar la variable. Una buena práctica común es declarar variables en la pseudo-clase :root, y así aplicarlas globalmente en todo el documento HTML:
Sin embargo, no es la única manera de declarar las variables, se pueden limitar variables a selectores específicos.
Los selectores indican a cuáles elementos del documento se debe aplicar una regla; una regla puede contener uno o más selectores, separados por coma.
3. Acceder a las variables CSS.
A la hora de acceder a las variables (propiedades personalizadas), hay que utilizar la función var(), indicando el nombre de la variable.
4. Variables fallback (alternativo) CSS.
En algunas situaciones es recomendable que la función var() tenga dos parámetros, es decir, el primer parámetro es la variable en cuestión, pero el segundo parámetro es opcional en caso de que la variable en cuestión no esté definida:
Con fallback nos aseguramos de que nuestra propiedad siempre tendrá un valor, dado que por algún motivo la variable en cuestión no exista.
5. Aplicando variables CSS desde JavaScript.
Las grandes ventajas de las variables CSS es que se pueden usar en JavaScript (JS) como si fueran propiedades CSS estándar. En el siguiente ejemplo manipulamos la variable --bs-subtitle-color de la Class Selector .subtitle:
6. Conclusiones.
Las propiedades personalizadas o variables en CSS son de gran importancia para mejora la mantenibilidad, flexibilidad y reusabilidad de las hojas de estilo de un sitio web o tema web. Su implementación es sencilla y de gran impacto a la hora de diseñar sitios web de gran impacto.
0 Comentarios