Share
Lorsque vous travaillez avec des pré-processeurs CSS tels que Sass, Less (ou tout autre langage de programmation), vous exploitez la puissance des variables. Toutefois, si vous créez spontanément vos noms de variables lors de la codification, il est fort probable que votre convention de dénomination manquera de cohérence. Vous devriez penser à organiser vos noms de variables (et votre projet d'ailleurs) de manière modulaire. Cela apportera une structure et une unité à votre projet dans son ensemble, ce qui facilitera la compréhension et la navigation de l'ensemble..
Supposons que vous ayez besoin d'une variable pour la couleur du texte dans votre projet. Vous pourriez l'appeler $ text-color, ou devriez-vous l'appeler $ couleur-texte? Comment décidez-vous? En choisir une au hasard peut contribuer à un manque de structure à mesure que le nombre de variables de votre projet augmente. L'expérience montre que nous oublions souvent comment nous avons nommé les variables pour des projets particuliers. Cela conduit à la confusion et à des méthodes fastidieuses de recherche et de remplacement globaux pour les noms de variables.
Nous avons besoin d’une règle pour définir et sélectionner nos noms de variables. Un excellent moyen de conserver la modularité dans votre projet consiste à regrouper des variables qui partagent des relations et des points communs. Ensuite, vous pouvez les nommer en organisant des mots décrivant leur fonction, de générique à spécifique (de la même manière que CSS fonctionne avec spécificité), de gauche à droite..
Par exemple, si j’ai quatre variables pour quatre couleurs de bordure différentes, je peux toutes les nommer en commençant par "bordure" (c’est le terme générique qu’elles partagent toutes) et être plus spécifique avec une lecture de gauche à droite. Grouper et nommer les variables de cette manière rend votre code plus facile à lire, à comprendre et à rappeler..
Supposons que nous travaillons dans SASS et que nous souhaitons créer un certain nombre de variables qui définissent la palette de couleurs de notre projet. Si nous travaillons avec une nuance de bleu, nous pourrions créer des variables comme celle-ci:
$ blue; $ bleu foncé; $ bleu moyen; $ bleu le plus foncé; $ bleu clair; $ le plus bleu clair;
Une meilleure façon de nommer ces variables serait de commencer par le mot générique commun: le bleu. Ensuite, nous pouvons obtenir plus précis de gauche à droite:
$ blue; $ bleu-foncé; $ blue-darkest; $ blue-light; $ blue-lightest;
Cela vous aidera non seulement à vous rappeler, mais permettra également à un éditeur de texte (tel que Sublime Text, Coda, etc.) de suggérer facilement des couleurs. De cette façon, vous n'avez pas à mémoriser exactement comment vous avez nommé vos variables. Au lieu de cela, vous pouvez commencer de manière générique et être plus spécifique car l'éditeur de texte suggère automatiquement les noms de variables. Tout ce que vous devez retenir, c'est que vous voulez une couleur bleue. Alors vous commencez à taper $ bleu et vous pouvez obtenir une liste de tous les différents bleus que vous avez créés!
Imaginez que je travaille sur un grand projet et que j'ai regroupé toutes mes variables contenant des valeurs de couleur en les préfixant du mot générique qu'elles ont toutes en commun: couleur.
// OK $ border-color; $ couleur de bordure foncée; $ bordure de couleur claire; $ mettre en évidence; $ link; $ link-dark; $ text; $ couleur-texte; $ link-color-light; $ lightest-text-color;
// Better $ color-border; $ color-border-dark; $ couleur-frontière-lumière; $ couleur en surbrillance; $ color-link; $ color-link-dark; $ color-link-light; $ couleur-texte; $ color-text-light; $ color-text-lightest;
Ensuite, disons que j'avais besoin d'une couleur pour une bordure. Je commence à taper frontière: 1px solide $ colo et mon éditeur de texte peut suggérer toutes les variables de couleur que j'ai définies pour mon projet.
J'ai peut-être beaucoup de couleurs dans mon projet mais je ne veux que des couleurs de bordure. Je pourrais prédéfinir quelques variables avec les couleurs de bordure souhaitées. Ensuite, lors du codage, je peux simplement continuer à restreindre la spécificité de mon nom de variable border: 1px solid $ color-border et mon éditeur de texte suggérera automatiquement toutes les variables que j'ai avec ce préfixe. Tout ce que je dois faire c'est choisir celui que je veux!
Même si vous n'aviez pas d'indications de code, cela resterait un moyen efficace de nommer vos variables. Il vous aide à vous rappeler facilement ce que vous avez nommé variables, car les variables qui partagent des relations partagent des préfixes..
Nommer vos variables de manière modulaire vous aidera à comprendre votre projet de manière conceptuelle avant de coder, pendant que vous codez et après. C'est une situation gagnant-gagnant-gagnant!
Accentsconagua