8 bonnes pratiques pour nommer les classes et les identifiants CSS dans un projet JavaScript

Les conventions de dénomination des classes CSS et des identifiants jouent un rôle important dans la compréhension et la maintenance du code dans un projet JavaScript. Les noms utilisés peuvent améliorer la clarté, la réutilisabilité et la flexibilité de la base de code. Il est important de suivre les meilleures pratiques lors de la dénomination des classes CSS et des ID dans un projet JavaScript.

1. Utiliser des noms sémantiques

Choisir des noms qui expliquent précisément la fonction ou le but de l'élément est crucial. 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 titulaire, essayez d'utiliser des noms tels que entête ou barre latérale qui reflètent le rôle spécifique du composant.

/* Exemple de noms sémantiques */
.entête {}
.sidebar {}

2. Utiliser des conventions de dénomination cohérentes

La cohérence est essentielle lors de la dénomination des classes CSS et des identifiants. L'utilisation de la même norme de dénomination à tous les niveaux simplifie la maintenance de la structure de la base de code.

Les conventions de nommage BEM (Block Element Modifier) ​​et OOCSS (Object-Oriented CSS) sont les conventions de nommage 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 façon dont vous pouvez créer un menu de navigation en utilisant OOCSS :

/* Structure */
.nav {
afficher: fléchir;
style liste: aucun;
}
.nav__item {
marge droite: 1Rem;
}
.nav__link {
texte-décoration: aucun;
couleur: #333;
}
/* Apparence */
.nav__link:flotter {
texte-décoration: souligner;
}

Vous avez deux parties distinctes du code pour le menu de navigation dans cet exemple, une pour la structure et une pour l'apparence. La partie apparence décrit les couleurs et autres styles qui lui donnent un aspect attrayant, tandis que la section structure explique comment et où les éléments de menu seront positionnés.

3. Évitez 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. Afin de différencier les modules, les bibliothèques ou d'autres parties de la base de code qui pourraient avoir des noms de classe en conflit, le préfixe d'espace de noms est utilisé.

Cette fonctionnalité est utile cependant, elle peut entraîner des problèmes de spécificité et de maintenabilité.

L'un des plus grands inconvénients des espaces de noms est la difficulté à gérer la spécificité du sélecteur. 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 conduit à un gonflement du code CSS, qui est déroutant et difficile à maintenir au fil du temps.

Prenez, par exemple :

/* Avec espace de noms */
.mon-module.contenu {
Couleur de l'arrière plan: bleu;
}
/* Sans espace de noms */
.module-en-tête {
Couleur de l'arrière plan: rouge;
}
.module-content {
Couleur de l'arrière plan: jaune;
}

Le préfixe d'espace de noms .mon-module et .contenu sont tous deux utilisés dans le bloc de code principal. La sélection devient ainsi plus précise, ce qui rend plus difficile le style futur.

Dans la deuxième partie, l'espace de noms est remplacé par des noms de classe descriptifs .module-en-tête et .module-content. En plus de rendre le code plus facile à comprendre, cela le rend également plus simple à entretenir.

L'utilisation d'espaces de noms ajoute une complexité inutile à votre programme, en particulier lorsque de nombreuses personnes travaillent sur différentes parties du même projet. Vous pouvez trouver difficile de comprendre et de modifier le code de l'autre, car différentes équipes peuvent utiliser différents préfixes d'espace de noms.

Utilisez des noms de classe qui sont descriptifs, par exemple :

.entête {
Couleur de l'arrière plan: rouge;
}
.contenu {
Couleur de l'arrière plan: jaune;
}

En utilisant des noms de classe descriptifs, vous pouvez supprimer l'exigence d'espaces de noms et vous pouvez garder votre base de code bien structurée et facile à comprendre.

4. Évitez les noms globaux

Dans les projets JavaScript, il est essentiel d'éviter les noms globaux pour les classes CSS et les ID. Les noms globaux compliquent la maintenance du code et augmentent la possibilité de nommer les risques. Pour garantir une base de code plus durable et évolutive, il est bon d'utiliser des noms plus précis dans le cadre d'un composant ou d'un module.

Considérez l'exemple ci-dessous :

 Utilisation incorrecte des noms globaux 
<divclasse="récipient">
<divclasse="barre latérale">
 Contenu ici 
div>
div>

Les noms de classes génériques barre latérale et récipient dans l'exemple ci-dessus sont susceptibles d'entrer en conflit avec d'autres feuilles de style ou du code JavaScript à l'intérieur du projet. Par exemple, si deux feuilles de style spécifient le même .sidebar classe, l'une avec un arrière-plan bleu et l'autre avec un arrière-plan rouge, la couleur de la barre latérale dépendra de la feuille de style chargée 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'étendent au sein du composant ou du module concerné pour minimiser ces problèmes.

Regardez une version améliorée.

 Amélioré avec des noms spécifiques 
<divclasse="en-tête__container">
<divclasse="sidebar__contenu">
 Contenu ici 
div>
div>

Dans la version modifiée, les noms de classe en-tête__container et sidebar__contenu 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. 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é un bloc. Les éléments sont les parties de composant d'un bloc qui reposent sur le contexte du bloc. Les modificateurs peuvent modifier l'apparence ou le comportement d'un bloc ou d'un élément.

Voici un exemple utilisant la convention de nommage BEM :

/* Exemple de convention de nommage BEM */
/* Bloc */
.entête {} 
/* Elément du bloc */
.header__logo {} 
.header__menu {}
/* Modificateur de l'élément */
.header__menu--actif {} 

L'illustration ci-dessus affiche un entête bloquer avec un logo et un menu élément. Le menu l'article reçoit le actif changer 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 classe et d'ID 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 ID offre des fonctionnalités JavaScript. Conventions de nommage JavaScript couplé à ces conventions de nommage CSS peut vous faire gagner du temps et des efforts à long terme.

 HTML avec préfixe JavaScript 
<boutonclasse="js-bascule">Basculerbouton>
<dividentifiant="js-modal">Modaldiv>

7. Utiliser des noms descriptifs

Vous pouvez mieux comprendre l'objectif, la fonction ou le contenu d'un élément grâce à des noms descriptifs.

Considérez l'exemple ci-dessous :

/* Noms non descriptifs */
.boite bleue {
/* Styles ici */
}
un {
/* Styles ici */
}

Les noms de classe boite bleue et un dans l'exemple ci-dessus ne transmettent aucune information pertinente sur les composants auxquels ils font référence. L'absence de dénomination descriptive peut vous empêcher de comprendre rapidement les objectifs ou les rôles de certains composants à l'intérieur du programme.

Utilisez des noms descriptifs qui expliquent avec précision le rôle de l'élément pour améliorer la lisibilité et la maintenabilité du code.

Considérez l'exemple amélioré ci-dessous :

/* Noms descriptifs */
.product-card {
/* Styles ici */
}
.navigation-link {
/* Styles ici */
}

Les noms de classe fiche-produit et lien de navigation dans la version mise à jour, indiquez clairement à quoi sert chaque élément. Vous constaterez que l'exploration et la modification du code sont plus simples avec ces noms descriptifs.

L'utilisation de noms descriptifs profite aux développeurs actuels et futurs potentiels travaillant 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 pièces.

8. Utilisez des noms courts et concis

Bien que des noms distinctifs soient essentiels, il est également important de les garder concis. Les noms de classe et d'ID longs peuvent rendre le code plus difficile à lire et à gérer. Essayez de trouver un équilibre entre être bref et être détaillé. De plus, envisagez d'utiliser des acronymes ou des abréviations bien connus dans le contexte du projet.

Considérez 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 élément de navigation ou lien de navigation au lieu de longs comme interface de navigation ou lien de navigation principal.

.nav-item {
/* Styles pour les éléments du menu de navigation */
}
lien .nav {
/* Styles pour les liens de navigation */
}

Utiliser des acronymes ou des abréviations populaires dans le contexte du projet, comme navigation pour la navigation, pourrait rendre le code beaucoup plus facile à comprendre pour les autres programmeurs.

Meilleures pratiques pour nommer les classes et les ID CSS

Dans un projet JavaScript, il est crucial de nommer correctement les classes CSS et les identifiants pour la lisibilité, la maintenance et l'évolutivité du code.

Vous pouvez simplifier les feuilles de style et améliorer la qualité du code. Prendre le temps d'établir de bonnes conventions de nommage sera payant à long terme en facilitant la compréhension et la maintenance de la base de code pour vous et les autres.