• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 2/24/20

Créez des sélecteurs HTML avec la méthodologie BEM

Log in or subscribe for free to enjoy all this course has to offer!

Soyons honnêtes, vous passerez plus de temps à lire votre code qu’à l’écrire. Il vous faudra souvent vous replonger dedans et le parcourir à la recherche d’un élément à modifier, ou juste pour vous rappeler comment fonctionne tel ou tel élément.

Lorsque vous écrivez du code, il est primordial de le faire en anticipant l’évolution de votre projet et ce qu’il pourrait devenir. Votre futur vous ne se souviendra peut-être pas pourquoi vous aviez appelé ce sélecteur   .btn-alt  et encore moins à quoi il sert.

Avoir la possibilité de jeter un coup d’œil à un nom de classe et savoir immédiatement le rôle de votre classe et comment elle interagit avec d’autres éléments nous ferait gagner beaucoup de temps et d’énergie à l’avenir, n’est-ce pas ?

Apprenez-en un peu plus sur BEM

Eh bien, pour répondre à cette problématique, je vous présente BEM, une convention CSS qui va nous aider à rendre nos classes plus compréhensibles, et ce grâce au nommage.

BEM est l’acronyme de bloc, élément, modificateur. En assignant chaque sélecteur que vous écrivez à l’une de ces trois catégories, vous êtes en mesure de définir sa fonctionnalité et ses relations, tout en le nommant correctement, et de définir un sélecteur comme un bloc, élément ou modificateur.

Pas mal, non ? Mais que sont au juste les blocs, éléments et modificateurs ?

Construisez des blocs

Un bloc est un composant, ou une section d’une page qui est autonome et peut fonctionner indépendamment du reste de la page. Cela peut être un header, un footer, un conteneur, un menu ou même un bouton. Le but est simple : vous pourriez supprimer tout ce qu’il y a autour de votre bloc et vous pourriez toujours comprendre de quoi il s’agit. 

Rappelez-vous, dans l’introduction, je vous parlais de construire un portfolio. Jetons-y un œil. Nous avons un logo, une barre de navigation, une citation et une grille de projets.

La page d’accueil du portfolio servant d'exemple
La page d’accueil du portfolio servant d'exemple

Si on supprimait tout sauf le titre d’un projet, ça n’aurait plus trop de sens en soi. Le titre ne serait alors qu’un bout de texte isolé, sans aucun lien avec le reste.

Image montrant un morceau isolé du site appelé le titre du projet
Le titre, oui, mais le titre de quoi… ?

Mais si nous isolons l’aperçu entier d’un projet (le titre, l’image, la description) : ça fonctionne. On a une image avec un titre et une description, on comprend de quoi il s’agit. Cela signifie que dans la terminologie BEM, notre preview de projet est un bloc !

Image montrant le bloc projet
Aperçu du projet

On nomme un bloc en décrivant sa fonction. Nommons notre bloc pour notre aperçu de projet  .proj-prev  (prev pour preview ou aperçu en français), en y assignant uniquement les règles qui sont spécifiques à la configuration de ce bloc en particulier.

Nous pouvons définir que le texte soit blanc pour tous les éléments utilisés dans notre bloc. En assignant ce paramètre au bloc, tous ses éléments hériteront de cette couleur. Nous devons aussi définir une marge pour le bas du bloc.

CSS
.proj-prev {
  color: #fff;
  margin-bottom: .25rem;
}

Nous avons utilisé le sélecteur .proj-prev  pour définir la  forme de notre bloc : il a une petite marge en bas et le texte est blanc. Peu importe ce que vous ajoutez dans votre aperçu de projet, le texte sera blanc et il y aura une marge en bas. Nous avons donc un morceau de code réutilisable, ce qui nous permet d’avoir une codebase bien ordonnée, tout en assurant une certaine cohérence graphique et qui, bonus, suit le principe DRY (vous vous en souvenez ? 😉). 

Créez des éléments

Maintenant, est-ce que vous vous souvenez de ce bout de texte pour le titre du projet qui ne fonctionnait pas tout seul ? Il ne peut pas fonctionner de façon autonome, mais en revanche il partie intégrante du bloc : il s’agit d’un élément de ce bloc.

Image montrant un bloc et un élément
Le titre du projet est un élément du bloc

Le nom d’un élément doit indiquer deux choses :

  • son bloc parent, suivi d’un double underscore (aussi appelé “dunders”) ;

  • la fonction de l’élément. Comme c’est le titre de notre projet, on va le nommer  .proj-prev__heading et lui assigner l’ensemble de règles qui suit.

CSS

.proj-prev__heading {
  font-size: 4rem;
  padding-left: 2.5rem;
  margin: 0;
  line-height: 6rem;
}

Nous avons vu les blocs et les éléments, passons à présent aux modificateurs !

Élaborez des modificateurs

Les modificateurs modifient l’apparence d’un bloc mais aussi d’un élément. Voyez-les comme des sélecteurs qui créent différentes versions d’un bloc ou d’un élément. Besoin de changer la taille, la couleur, la police, etc. d’un élément, tout en le gardant tel quel ? C’est un modificateur qu’il vous faut !

Imaginons que vous vouliez faire les choses un peu différemment pour certains projets, histoire de les faire ressortir. La couleur de base du texte pour le bloc est le blanc, mais pour certains projets, vous voudriez les mettre en valeur en utilisant du vert clair.

Pour cela, vous allez créer un modificateur pour votre bloc .proj-prev. Pour nommer le modificateur, vous devez préciser le bloc (ou l’élément) qu’il modifie, y ajouter deux tirets suivi du style graphique de votre modificateur. Puisque vous êtes en train de modifier le bloc  .proj-prev  pour lui donner un texte vert couleur menthe, vous pouvez l’appeler  .proj-prev--mint  et lui attribuer une couleur.

CSS
.proj-prev--mint {
  color: #15DEA5;
}

Et l’appliquer au bloc HTML.

HTML
<section class="proj-prev proj-prev--mint">
  <div class="proj-prev__image">
      <img src="/public/img/photography_1280w.jpg" alt="project title goes here" >
  </div>
  <h1 class="proj-prev__heading">
      Project Title
  </h1>
  <p class="proj-prev__byline">
      project keywords would go here
  </p>
</section>

Et quand on regarde le rendu du HTML, on voit qu’il y a bel et bien un projet qui ressort avec un texte couleur menthe sans modifier les autres  🎉 :

Nous avons modifié la couleur du texte pour un seul des blocs
Nous avons modifié la couleur du texte pour un seul des blocs

Voici toute la page d’accueil, séparée en blocs, éléments et modificateurs :

Notre page d’accueil divisée en blocs, éléments et modificateurs
Notre page d’accueil divisée en blocs, éléments et modificateurs

Quand vous construisez vos pages, imaginez que vous empilez des boîtes dans des boîtes en les dessinant, ça vous aidera à mieux visualiser votre structure HTML. 😉

Créez votre propre barre de navigation avec BEM

Maintenant que nous avons passé en revue les fondamentaux de BEM, mettons-les en application en créant une barre de navigation avec nos nouveaux  sélecteurs.🤘

<nav class="nav">
  <ul>
      <li class="nav__link nav__link--active">work</li>
      <li class="nav__link"> <a href="/about.html">about</a> </li>
      <li class="nav__link"> <a href="/contact.html">contact</a>  </li>
  </ul>
</nav>

Notez bien, c’est important : les sélecteurs BEM sont toujours implémentés sous forme de classes.

Mais pourquoi ? 🤔

Pour pouvoir appliquer les modificateurs avec des résultats cohérents, vous devez être sûr que vos sélecteurs ont une spécificité aussi basse que possible. Si vous assignez le sélecteur de bloc avec un id au lieu d’une classe, sa spécificité prendra automatiquement le dessus sur tous les modificateurs assignés en tant que classe.

Rappelez-vous, dans le chapitre précédent nous avons vu que quand le navigateur interprète vos éléments, il cherche d’abord les classes locales, puis les id, puis les classes, et enfin les éléments. S’il croise un sélecteur attaché à un id, celui-ci prendra le dessus sur toute règle potentiellement contradictoire provenant d’une classe. Or, le but d’un modificateur est d’introduire une règle contradictoire, comme une couleur ou une taille de police différente, et que celle-ci annule la règle originelle ; c’est pourquoi on utilise toujours des classes pour implémenter des sélecteurs BEM !

Jetons à présent un œil au CSS de notre barre de navigation :

CSS
.nav {
  padding-right: 6rem;
  text-align: right;
}

.nav__link {
  display: inline;
  font-size: 3rem;
  padding-left: 1.5rem;

}

 

.nav__link a {
  text-decoration: none;
  color: #D6FFF5;
}

 

.nav__link--active {
  color: #001534;
}

 

.nav__link a:hover {
  color: #fff;
}

Pendant que nous essayons de garder une spécificité basse pour notre sélecteur, les pseudoclasses, comme par exemple :hover, et les combinateurs, tels que les combinateurs descendants, peuvent parfaitement être utilisés. 

Pause pause pause ! Combinateurs descen... quoi ? 😅

Un combinateur descendant, aussi appelé sélecteur d’éléments descendant, permet de sélectionner les éléments qui dépendent d’un sélecteur. Il est matérialisé par un ou plusieurs espaces. Par exemple,  div span permet de cibler n’importe quel span dans un élément div.

Les combinateurs descendants vont augmenter la spécificité du sélecteur, mais ils peuvent aussi contribuer à créer du code plus propre et plus lisible en diminuant le besoin d’assigner une classe à chaque élément de la page.😱

En CSS, les combinateurs, peu importe leur type, sélectionnent les éléments en fonction de leur relation à un élément défini.

Prenons une liste non ordonnée,  <ul>, et les items de cette liste,  <li>. Plutôt que de créer un sélecteur de classe pour le  <li>  et de l’appliquer à chacun des items, vous pouvez appliquer un combinateur enfant qui sélectionnera tous les enfants directs du  <ul>.

CSS
ul.list {
  list-style:none;
}

 

ul.list > li {
  font-weight: 100;
  color: #001534;
}

Ce qui donne un HTML beaucoup plus propre que d’appliquer une classe à chaque <li> :

HTML
<ul class="list">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

BEM nous a aidé à rendre notre CSS beaucoup mieux organisé et plus efficace, et notre HTML plus propre et lisible, en définissant clairement la fonction des sélecteurs. Mais notre CSS n’en reste pas moins un gros amas de code sans forme. Essayez par vous-même !

Entraînez-vous

Adaptez le code fourni en utilisant la méthode BEM.

https://api.next.tech/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=a0ab65fb-062c-47c1-9cf5-f8979c45d0e7

En résumé

  • BEM signifie bloc, élément, modificateur :

    • les blocs sont des bouts de code autonomes ;

    • les éléments sont les parties qui forment le bloc ;

    • les modificateurs changent l’apparence ou le comportement d’un bloc ou d’un élément.

  • Les blocs sont nommés en fonction de leur rôle :

    • les éléments indiquent le nom de leur bloc parent, suivi d’un dunder (__) puis du rôle de l’élément : form__label.

  • Les modificateurs utilisent le nom du bloc ou de l’élément qu’ils modifient, suivi de deux tirets (--) et de ce que le sélecteur modifie : button--green.

  • Vous n’avez pas besoin d’attribuer à chaque élément d’une page web un sélecteur de classe. Vous pouvez utiliser les sélecteurs pour que votre code HTML soit plus propre et concis.

Le chapitre suivant va vous présenter des outils qui donneront plus de structure visuelle à votre CSS, tout en vous facilitant la vie au passage. Préparez-vous à plonger dans le monde des préprocesseurs CSS et de Sass !

Example of certificate of achievement
Example of certificate of achievement