Utilisation des variables CSS / propriétés personnalisées – HTML & CSS – SitePoint Forums

j’ai fait quelques recherches avant ce post

j’ai du mal à comprendre les variables CSS / propriétés personnalisées… comment elles fonctionnent et comment elles sont bénéfiques et quand je dois les utiliser

j’apprécierais quelques explications (substantielles)

et quelques exemples novices

allez doucement pour moi

je suis nouveau dans ce concept

Merci!

J’utilise pas mal de variables CSS, et en regardant sur un site Web, je semble les utiliser à deux fins. Il y a probablement d’autres bonnes raisons de les utiliser, mais je vous dis simplement que c’est ce que je les utiliser pour.

1. Je déteste les « nombres magiques », qu’ils soient enfouis dans mon CSS, mon JS ou mon PHP. J’essaie donc de les extraire de partout ailleurs et de les mettre en tant que variables CSS (et en PHP en tant que constantes PHP). Ainsi, par exemple, j’ai un bon nombre qui ressemble à:

--body-top-border:15px;	/* Top margin size of dark border (goes away as browser shrinks) */
--button-color:#DDD;	/* Color for all tab and button links */
--box-padding:3px;		/* Padding for any text box */

Ce type de variable est utilisé dans mon CSS, comme :

body {margin-top:var(--body-top-border)}
article {padding:var(--box-padding);color:var(--text-color)}

où pour l’élément body, je n’enregistre vraiment rien, mais j’ai extrait la valeur magique “15px” qui serait autrement enterrée dans mon CSS, et l’ai mise dans le bloc de variables CSS. Pour le rembourrage de l’article, je l’ai utilisé à de nombreux endroits, de sorte que toutes mes boîtes ont le même rembourrage et je déclare juste la valeur de 3px une fois. Il existe bien sûr d’autres moyens de le faire, avec une classe comme “.thinPadding” qui pourrait être ajoutée à chacune de mes boîtes, mais je trouve la variable CSS assez pratique pour cela. De plus, si je regarde mon site et que je décide que le rembourrage doit être un peu plus épais, je peux simplement accéder à la variable CSS et la modifier à un seul endroit.

2. La deuxième utilisation des variables CSS concerne les valeurs calculées qui peuvent être transformées en une seule variable, pour me simplifier la vie. Je ne l’utilise pas autant que la première utilisation, mais à titre d’exemple:

--default-box-content:calc(var(--box-size) - 2 * var(--box-padding));

Cela me permettrait de définir une autre valeur CSS comme celle-ci, sans avoir à me souvenir des détails de ce à quoi ressemble cette boîte :

#messageContent {width:var(--default-box-content)}

J’espère que ces exemples vous aideront.