Les conventions de dénomination des classes et des identifiants CSS jouent un rôle important dans la compréhension et la maintenance du code d’un projet JavaScript. Les noms utilisés peuvent améliorer la clarté, la réutilisation et la flexibilité de la base de code. Il est important de suivre les meilleures pratiques pour nommer les classes et les identifiants CSS dans un projet JavaScript.
1. Utiliser des noms sémantiques
Il est essentiel de choisir des noms qui expliquent précisément la fonction ou l’objectif de l’élément. Les noms sémantiques fournissent un contexte significatif et facilitent la compréhension du code.
Par exemple, au lieu d’utiliser des noms traditionnels comme boîte ou détenteuressayez d’utiliser des noms comme en-tête ou barre latérale qui reflètent le rôle spécifique du composant.
/* Semantic names example */
.header {}
.sidebar {} 2. Utiliser des conventions de dénomination cohérentes
La cohérence est essentielle pour nommer les classes et les identifiants CSS. L’utilisation de la même norme de dénomination dans tous les domaines simplifie le maintien de la structure de la base de code.
Les conventions de dénomination BEM (Block Element Modifier) et OOCSS (Object-Oriented CSS) sont les conventions de dénomination les plus préférées.
Vous pouvez utiliser la convention de dénomination OOCSS pour écrire un code CSS modulaire, gérable et évolutif. Voici une illustration de la manière dont vous pouvez créer un menu de navigation à l’aide de OOCSS :
/* Structure */
.nav {
display: flex;
list-style: none;
}
.nav__item {
margin-right: 1rem;
}
.nav__link {
text-decoration: none;
color: #333;
}
/* Appearance */
.nav__link:hover {
text-decoration: underline;
} Dans cet exemple, le code du menu de navigation comporte deux parties distinctes, l’une pour la structure et l’autre pour l’apparence. La partie relative à l’apparence décrit les couleurs et autres styles qui lui donnent un aspect attrayant, tandis que la section relative à la structure explique comment et où les éléments du menu seront positionnés.
3. Éviter les espaces de noms
En CSS, les espaces de noms sont des structures sémantiques qui vous permettent de fournir un préfixe d’espace de noms pour leurs sélections. Le préfixe d’espace de noms est utilisé pour différencier les modules, les bibliothèques ou d’autres parties de la base de code qui pourraient avoir des noms de classe conflictuels.
Cette fonctionnalité est utile, mais elle peut poser des problèmes de spécificité et de maintenabilité.
L’un des principaux inconvénients des espaces de noms est la difficulté à gérer la spécificité des sélecteurs. Un préfixe d’espace de noms peut rendre une sélection plus particulière, ce qui rend plus difficile le remplacement des styles à l’avenir.
Cela entraîne un gonflement du code CSS, qui est déroutant et difficile à maintenir au fil du temps.
Prenons un exemple :
/* With namespace */
.my-module .content {
background-color: blue;
}
/* Without namespace */
.module-header {
background-color: red;
}
.module-content {
background-color: yellow;
} Le préfixe de l’espace de noms .mon-module et .content sont tous deux utilisés dans le bloc de code principal. La sélection devient ainsi plus précise, ce qui rendra plus difficile la superposition de styles à l’avenir.
Dans la deuxième partie, l’espace de noms est remplacé par des noms de classes descriptifs .module-header et .module-content. En plus de rendre le code plus facile à comprendre, cela le rend également plus simple à maintenir.
L’utilisation d’espaces de noms ajoute une complexité inutile à votre programme, en particulier lorsque plusieurs personnes travaillent sur différentes parties d’un même projet. Il peut être difficile de comprendre et de modifier le code de l’autre, car les équipes utilisent des préfixes d’espace de noms différents.
Utilisez des noms de classe descriptifs, par exemple :
.header {
background-color: red;
}
.content {
background-color: yellow;
} En utilisant des noms de classe descriptifs, vous pouvez vous affranchir de l’obligation d’utiliser des espaces de noms et vous pouvez garder votre base de code bien structurée et facile à comprendre.
4. Éviter les noms globaux
Dans les projets JavaScript, il est essentiel d’éviter les noms globaux pour les classes et les ID CSS. Les noms globaux compliquent la maintenance du code et augmentent la possibilité de risques de dénomination. Pour garantir une base de code plus durable et plus évolutive, il est préférable d’utiliser des noms plus précis dans le cadre d’un composant ou d’un module.
Prenons l’exemple suivant :
<!-- Incorrect use of global names -->
<div class="container">
<div class="sidebar">
<!-- Content here -->
</div>
</div> Les noms de classe génériques barre latérale et conteneur dans l’exemple ci-dessus sont susceptibles d’entrer en conflit avec d’autres feuilles de style ou du code JavaScript dans le projet. Par exemple, si deux feuilles de style spécifient la même valeur de .sidebar l’une avec un fond bleu et l’autre avec un fond rouge, la couleur de la barre latérale dépendra de la feuille de style qui se charge en dernier. Des résultats inattendus et imprévisibles peuvent en résulter.
Il est préférable d’utiliser des noms plus précis qui s’appliquent à l’intérieur du composant ou du module concerné pour minimiser ces problèmes.
Voir une version améliorée.
<!-- Improved with specific names -->
<div class="header__container">
<div class="sidebar__content">
<!-- Content here -->
</div>
</div> Dans la version modifiée, les noms de classe header__container et sidebar__content Expliquez clairement à quoi sert chaque élément et ce qu’il fait.
L’utilisation de noms spécifiques réduit le risque de conflits de noms et garantit que les styles n’affectent que les composants prévus à l’intérieur de leurs composants ou modules respectifs.
5. Utiliser la convention de dénomination BEM
La convention de dénomination BEM (Block Element Modifier) est populaire pour nommer les classes CSS et les ID dans les projets JavaScript. Le BEM fournit une manière structurée et modulaire de nommer les éléments, encourage la réutilisation et facilite la maintenance des bases de code.
Les conventions BEM se composent de blocs, d’éléments et de modificateurs. Un élément de haut niveau ou un composant autonome est appelé bloc. Les éléments sont les parties d’un bloc qui dépendent du contexte du bloc. Les modificateurs peuvent changer l’apparence ou le comportement d’un bloc ou d’un élément.
Voici un exemple utilisant la convention de dénomination BEM :
/* BEM Naming Convention example */
/* Block */
.header {}
/* Element of the block */
.header__logo {}
.header__menu {}
/* Modifier of the element */
.header__menu--active {} L’illustration ci-dessus présente un en-tête bloc avec un logo et un menu élément. L’élément menu L’article reçoit l’approbation de l’Assemblée générale des Nations Unies. actif change pour indiquer qu’il est devenu actif.
Vous pouvez rapidement identifier les composants fondamentaux et les connexions entre les différentes parties, ce qui rend la structure et la hiérarchie de la base de code plus claires.
6. Utiliser des préfixes ou des suffixes
Vous pouvez ajouter des paramètres supplémentaires aux noms de classes et d’identifiants CSS en les préfixant ou en les postfixant, en particulier dans les grands projets. Vous pouvez utiliser un préfixe comme js– pour indiquer qu’une classe ou un identifiant offre des capacités JavaScript. Les conventions de dénomination JavaScript associées aux conventions de dénomination CSS peuvent vous faire gagner du temps et vous épargner des efforts à long terme.
<!-- HTML with JavaScript prefix -->
<button class="js-toggle">Toggle</button>
<div id="js-modal">Modal</div> 7. Utiliser des noms descriptifs
Les noms descriptifs permettent de mieux comprendre l’objectif, la fonction ou le contenu d’un élément.
Prenons l’exemple suivant :
/* Non-descriptive names */
.blue-box {
/* Styles here */
}
a {
/* Styles here */
} Les noms de classe boîte bleue et a dans l’exemple ci-dessus ne transmettent aucune information pertinente sur les composants qu’ils référencent. L’absence de dénomination descriptive peut rendre difficile la compréhension rapide des objectifs ou des rôles de certains composants à l’intérieur du programme.
Utilisez des noms descriptifs qui expliquent précisément le rôle de l’élément pour améliorer la lisibilité et la maintenabilité du code.
Examinez l’exemple amélioré ci-dessous :
/* Descriptive names */
.product-card {
/* Styles here */
}
.navigation-link {
/* Styles here */
} Les noms de classe carte-produit et lien de navigation dans la version mise à jour rendent évidente la fonction de chaque élément. L’exploration et la modification du code seront plus simples grâce à ces noms descriptifs.
L’utilisation de noms descriptifs est bénéfique pour les développeurs actuels et potentiels qui travaillent sur la base de code. Lorsque vous revisitez le code après un certain temps, vous pouvez facilement comprendre la structure et le fonctionnement des éléments.
8. Utiliser des noms courts et concis
S’il est essentiel que les noms soient distinctifs, il est également important qu’ils soient concis. De longs noms de classes et d’identifiants peuvent rendre le code plus difficile à lire et à maintenir. Essayez de trouver un équilibre entre la concision et le détail. En outre, envisagez d’utiliser des acronymes ou des abréviations bien connus dans le contexte du projet.
Prenons le cas où vous souhaitez utiliser CSS pour personnaliser un menu de navigation sur votre site web. Vous pouvez utiliser des noms plus courts et plus spécifiques comme nav-item ou nav-link au lieu de longues comme interface de navigation ou lien-navigation-principal.
.nav-item {
/* Styles for navigation menu items */
}
.nav-link {
/* Styles for navigation links */
} Utilisation d’acronymes ou d’abréviations populaires dans le contexte du projet, tels que nav pour navigationLe fait d’utiliser le code de l’utilisateur, en l’occurrence le code de l’utilisateur, pourrait rendre le code beaucoup plus facile à comprendre pour d’autres programmeurs.
Meilleures pratiques pour nommer les classes et les ID CSS
Dans un projet JavaScript, il est essentiel de nommer correctement les classes et les identifiants CSS pour assurer la lisibilité du code, la maintenance et l’évolutivité.
Vous pouvez simplifier les feuilles de style et améliorer la qualité du code. Prendre le temps d’établir de bonnes conventions de nommage s’avérera payant à long terme en facilitant la compréhension et la maintenance de la base de code pour vous et pour les autres.
