Conventions de dénomination CSS qui vous feront gagner des heures de débogage

J'ai entendu beaucoup de développeurs dire qu'ils détestaient les CSS. D'après mon expérience, cela vient du fait de ne pas prendre le temps d'apprendre le CSS.

Coréen ??

알림: 한국인 독자 분들 을 위해 본 기사 는 한국어 로 번역 되었으며 , 버전 은 한국어 여기 에서 보실 수 있습니다

CSS n'est pas le plus joli «langage», mais il a alimenté avec succès le style du Web depuis plus de 20 ans maintenant. Pas trop mal, hein?

Cependant, au fur et à mesure que vous écrivez plus de CSS, vous voyez rapidement un gros inconvénient.

Il est sacrément difficile de maintenir CSS.

Un CSS mal écrit se transformera rapidement en cauchemar.

Voici quelques conventions de dénomination qui vous éviteront un peu de stress et d'innombrables heures sur toute la ligne.

Utiliser des chaînes délimitées par des tirets

Si vous écrivez beaucoup de JavaScript, l'écriture de variables dans le cas du chameau est une pratique courante.

var redBox = document.getElementById('...')

Génial, non?

Le problème est que cette forme de dénomination n'est pas bien adaptée au CSS.

Ne faites pas cela:

.redBox { border: 1px solid red;}

À la place, faites ceci:

.red-box { border: 1px solid red;}

Il s'agit d'une convention de dénomination CSS assez standard. Il est sans doute plus lisible.

En outre, il est cohérent avec les noms de propriété CSS.

// Correct
.some-class { font-weight: 10em}
// Wrong
.some-class { fontWeight: 10em}

La convention de dénomination BEM

Les équipes ont différentes approches pour écrire des sélecteurs CSS. Certaines équipes utilisent des séparateurs de tirets, tandis que d'autres préfèrent utiliser la convention de dénomination plus structurée appelée BEM.

Généralement, il y a 3 problèmes que les conventions de dénomination CSS tentent de résoudre:

  1. Pour savoir ce que fait un sélecteur, rien qu'en regardant son nom
  2. Pour avoir une idée de l'endroit où un sélecteur peut être utilisé, rien qu'en le regardant
  3. Connaître les relations entre les noms de classes, simplement en les regardant

Avez-vous déjà vu des noms de classe écrits comme ceci:

.nav--secondary { ...}
.nav__header { ...}

C'est la convention de dénomination BEM.

Expliquer le BEM à un enfant de 5 ans

BEM tente de diviser l'interface utilisateur globale en petits composants réutilisables.

Considérez l'image ci-dessous:

Non, ce n'est pas primé :(

Le stick-man représente un composant, tel qu'un bloc de design.

Vous avez peut-être déjà deviné que le B dans BEM signifie «Block».

Dans le monde réel, ce «bloc» pourrait représenter une navigation de site, un en-tête, un pied de page ou tout autre bloc de conception.

En suivant la pratique expliquée ci-dessus, un nom de classe idéal pour ce composant serait stick-man.

Le composant doit avoir le style suivant:

.stick-man { }

Nous avons utilisé ici des chaînes délimitées. Bien!

E pour Elements

Le E dans «BEM» signifie Elements.

Dans l'ensemble, les blocs de conception vivent rarement isolés.

Par exemple, l'homme-bâton a un head, deux magnifiques armset feet.

Les head,, feetet armssont tous les éléments du composant. Ils peuvent être considérés comme des composants enfants, c'est-à-dire des enfants de la composante parent globale.

À l'aide de la convention de dénomination BEM, les noms de classe d'éléments sont dérivés en ajoutant deux traits de soulignement, suivis du nom de l'élément.

Par exemple:

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M pour les modificateurs

Le M dans «BEM» signifie modificateurs.

Et si le bâton homme a été modifié et nous pourrions avoir un blueou un redhomme Stick-?

Dans le monde réel, cela peut être un redbouton ou un bluebouton. Ce sont des modifications du composant en question.

À l'aide de BEM, les noms de classes de modificateurs sont dérivés en ajoutant deux traits d'union suivis du nom de l'élément.

Par exemple:

.stick-man--blue {
}
.stick-man--red {
}

Le dernier exemple montrait le composant parent en cours de modification. Ce n'est pas toujours le cas.

Et si nous avions des stick-men de différentes headtailles?

Cette fois, l'élément a été modifié. N'oubliez pas que l'élément est un composant enfant dans le bloc conteneur global.

Le .stick-manreprésente le Block, .stick-man__headl'élément.

Comme vu dans l'exemple ci-dessus, les doubles tirets peuvent également être utilisés comme ceci:

.stick-man__head--small {
}
.stick-man__head--big {
}

Encore une fois, notez l'utilisation des doubles tirets dans l'exemple ci-dessus. Ceci est utilisé pour désigner un modificateur.

Maintenant vous l'avez.

C'est essentiellement ainsi que fonctionne la convention de dénomination BEM.

Personnellement, j'ai tendance à n'utiliser que des noms de classes de séparateurs de tirets pour les projets simples et BEM pour les interfaces utilisateur plus impliquées.

Vous pouvez en savoir plus sur BEM.

BEM - Modificateur d'élément de bloc

BEM - Block Element Modifier est une méthodologie qui vous aide à obtenir des composants réutilisables et un partage de code dans le… getbem.com

Pourquoi utiliser des conventions de dénomination?

Il n'y a que deux problèmes difficiles en informatique: l'invalidation du cache et la dénomination des choses - Phil Karlton

Nommer les choses est difficile. Nous essayons de rendre les choses plus faciles et de gagner du temps à l'avenir avec un code plus maintenable.

Nommer correctement les choses en CSS rendra votre code plus facile à lire et à maintenir.

Si vous choisissez d'utiliser la convention de dénomination BEM, il deviendra plus facile de voir la relation entre vos composants / blocs de conception simplement en regardant le balisage.

Se sentir confiants?

Noms CSS avec des crochets JavaScript

Aujourd'hui, c'est le premier jour de travail de John.

Il reçoit un HTMLcode qui ressemble à ceci:

John a lu cet article et se rend compte que ce n'est peut-être pas la meilleure façon de nommer les choses CSS. Il va donc de l'avant et refactorise la base de code comme ceci:

Ça a l'air bien, hein?

Inconnu de John, il avait cassé la base de code ???

Comment?

Quelque part dans le code JavaScript, il y avait une relation avec l'ancien nom de la classe, siteNavigation:

//the Javasript code
const nav = document.querySelector('.siteNavigation')

Ainsi, avec le changement de nom de classe, la navvariable est devenue null.

Quelle tristesse.

Pour éviter de tels cas, les développeurs ont mis au point différentes stratégies.

1. Utilisez les noms de classe js

Une façon d'atténuer ces bogues consiste à utiliser un js-*nom de classe pour désigner une relation avec l'élément DOM en question.

Par exemple:

Et dans le code JavaScript:

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

Par convention, quiconque voit le js-site-navigationnom de la classe comprendra qu'il existe une relation avec cet élément DOM dans le code JavaScript.

2. Utilisez l'attribut Rel

Je n'utilise pas cette technique moi-même, mais j'ai vu des gens le faire.

Le reconnaissez-vous?

Fondamentalement, l' attribut rel définit la relation entre la ressource liée et le document à partir duquel elle est référencée.

Dans l'exemple précédent avec John, les partisans de cette technique feraient ceci:

Et dans le JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

J'ai des doutes sur cette technique, mais vous risquez de la rencontrer dans certaines bases de code. L'affirmation ici est, "bien, il y a une relation avec Javascript, donc j'utilise l'attribut rel pour le désigner" .

Le Web est un grand espace avec de nombreuses «méthodes» différentes pour résoudre le même problème.

3. N'utilisez pas d'attributs de données

Certains développeurs utilisent des attributs de données comme hooks JavaScript. Ce n'est pas juste. Par définition, les attributs de données sont utilisés pour stocker des données personnalisées .

Edit # 1: Comme mentionné par des personnes incroyables dans la section des commentaires, si les gens utilisent l'attribut 'rel', alors il est peut-être correct d'utiliser des attributs de données dans certains cas. C'est votre appel après tout.

Astuce bonus: rédigez plus de commentaires CSS

Cela n'a rien à voir avec les conventions de dénomination, mais cela vous fera également gagner du temps.

Alors que beaucoup de développeurs Web essaient de NE PAS écrire de commentaires JavaScript ou de s'en tenir à quelques-uns, je pense que vous devriez écrire plus de commentaires CSS.

Puisque CSS n'est pas le «langage» le plus élégant, des commentaires bien structurés peuvent vous faire gagner du temps lorsque vous essayez de comprendre votre code.

Ça ne fait pas mal.

Jetez un œil à la qualité des commentaires du code source Bootstrap.

Vous n'avez pas besoin d'écrire des commentaires pour dire color: redque vous donnera une couleur rouge. Mais, si vous utilisez une astuce CSS moins évidente, n'hésitez pas à écrire un commentaire.

Prêt à devenir pro?

J'ai créé un guide CSS gratuit pour obtenir vos compétences CSS flamboyantes, immédiatement. Obtenez l'ebook gratuit.