wikinotes

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
{{tag>cours dev développement web css sass html}}



====== Clarifiez votre HTML avec BEM ======

Notes et transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sass-1#table-of-content|Simplifiez vous le CSS avec Sass]] proposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].


Soyons honnêtes, vous passerez plus de temps à lire votre code qu’à l’écrire. Que ce soit parcourir votre code à la recherche d’un élément à modifier, ou juste pour vous rappeler comment fonctionne tel ou tel élément. D’où l’importance de bien nommer vos sélecteurs.

Si je nomme ma classe ''.btn'', c’est assez évident que c’est un bouton, non ?

Totalement, mais d’ici quelques mois, est-ce que vous serez en mesure de dire de quel bouton il s’agit ? Est-ce que ce bouton fait partie d’un formulaire ? Ou d’une barre de navigation ? Ou même d’une page qui a été supprimée en HTML et dont on aurait oublié de supprimer le CSS ?

Tout peut arriver, mais tout ira bien, il nous suffit d’anticiper !


===== Découvrez BEM =====

Si je vous dis Canarticho. Sans connaître Pokémon, vous pouvez vous douter qu’on parle potentiellement d’un canard, et d’un artichaut : le nom en évoque l’apparence ou le pouvoir. C’est la même chose pour notre HTML.

Comme pour les pokémons, l’idéal serait qu’en un simple coup d'œil au nom d’une classe, on comprenne son usage et comment celle-ci interagit avec d’autres éléments.
On retrouve les essentiels de la page web de promotion, une barre de navigation, une présentation et un portfolio.
La page web du photographe Robbie Lens

{{exemple_site_web.png}}

En jetant un œil à cette page web, sans même lire le texte, on comprend qu’il y a une barre de navigation, une présentation et un portfolio. Et si je vous dis qu’il est possible de maintenir cette structure tout en l’appliquant dans votre HTML ?

Laissez-moi vous présenter **BEM**, une convention qui va nous aider à rendre nos classes plus compréhensibles, et ce grâce au **nommage**.


**BEM** est l’acronyme de **B**loc **E**lement **M**odificator. L’idée est qu’en assignant chaque sélecteur que vous écrivez à l’une de ces trois catégories, vous serez en mesure de définir sa fonctionnalité et ses relations. Pas mal, non? Mais que sont au juste ces blocs, éléments et modificateurs ?


===== Préparez des blocs =====

Commençons avec le **B** de **BEM**. : **B**lock ou bloc. 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. L’idée est que vous pourriez supprimer tout ce qu’il y a autour de votre bloc, et toujours comprendre de quoi il s’agit.

Pour illustrer, nous allons prendre comme exemple notre header, et plus précisément notre barre de navigation.

{{exemple_bloc_navbar.png|Tout à gauche on trouve le logo de Robbie Lens, tout à droite, les boutons accueil, à propos et Portfolio.}}

La barre de navigation servant d'exemple

Qu'observez-vous ? Notre header contient un logo, une barre de navigation. Notre barre de navigation contient plusieurs liens.

On nomme un bloc en décrivant sa **fonction**. Nommons notre bloc pour notre barre de navigation .navbar (navbar pour “barre de navigation”, en français), en y assignant uniquement les règles qui sont spécifiques à ce bloc.

<code html>
<nav class="navbar">
<!-- Notre barre de navigation -->
</nav>
</code>

<code css>
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</code>

Nous avons utilisé le sélecteur ''.navbar'' pour définir la structure de notre bloc : les éléments seront alignés les uns après les autres, ils seront centrés, avec un espace entre deux éléments et le texte de fond est blanc.

Peu importe ce que vous ajoutez dans votre barre de navigation, les éléments seront tous alignés les uns après les autres, centrés avec un espace entre eux.

Si on prend un peu de recul, on obtient un bout 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** : PARFAIT !


===== Ajoutez des éléments =====

Passons au **E** de **BEM**: **E**lement (ou élément, en français). Un bloc contient des éléments. Dans notre cas, si notre barre de navigation est un bloc, nos éléments seront… les liens et le logo !

Pour mieux les identifier, il nous faut leur donner un nom. Le nom d’un élément doit indiquer deux choses :

  * son **bloc parent**, suivi d’un **double underscore** (aussi appelé “dunders”) : ici %%.navbar__%%  ;
  * la **fonction** de l’élément : ici un lien, ou link, en anglais : ''%%.navbar__link%%''.

Ce qui nous donne : ''%%.navbar__link%%'' pour les liens et ''%%.navbar__logo%%'' pour notre logo.

Chaque lien ou élément sera défini ainsi :

<code css>
.navbar__link {
  margin-left: 30px;
  color: #242424;
  text-decoration: none;
}
</code>

Après le CSS, il nous faut ajouter cette nouvelle classe à nos éléments, donc nos liens :

<code html>
<nav class="navbar>
      <a class="navbar__link" href="index.html">Accueil</a>
      <a class="navbar__link" href="a-propos.html">À propos</a>
      <a class="navbar__link" href="portfolio.html">Portfolio</a>
</nav>
</code>

Nous avons notre bloc ''.navbar''  qui contient des éléments  ''%%.navbar__link%%''. Imaginons que vous vouliez faire en sorte que le lien Accueil soit plus voyant, et d’une couleur différente :

{{liens_navbar.png|Le bouton Accueil est en bleu clair au lieu d'être en gris comme À propos et Portfolio}}

Changement de style sur le bouton Accueil

Comment faire pour modifier nos liens et appliquer ce changement de style ? Vous avez dit Modifier ? C’est ce qu’il nous faut, passons à présent aux **modificateurs** !


===== Peaufinez avec des modificateurs =====

Le **M** de **BEM** signifie **M**odifier ou modificateur. Les modificateurs changent 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 !

Dans notre cas, nous aimerions que le lien vers l’accueil soit violet. Pour cela, vous allez créer un modificateur pour vos éléments ''%%.navbar__link%%''.

Pour nommer le modificateur, vous devez :

  * préciser le **bloc** (ou l’élément) qu’il modifie : ici ''%%.navbar__link%%'';
  * y ajouter deux tirets suivis du style graphique de votre modificateur : ici ''%%.navbar__link--purple%%''.

<code css>
.navbar__link--purple {
    color: #a5b4fc;
}
</code>

Et l’appliquer à votre HTML et le tour est joué !

<code html>
<nav class="navbar">
      <a class="navbar__link navbar__link--purple" href="index.html">Accueil</a>
      <a class="navbar__link" href="a-propos.html">À propos</a>
      <a class="navbar__link" href="portfolio.html">Portfolio</a>
</nav>
</code>


Si on reprend tout le code CSS que vous venez de créer, cela nous donne :

<code css>
.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.navbar__link {
  margin-left: 30px;
  color: #242424;
  text-decoration: none;
}


.navbar__link--purple {
  color: #a5b4fc;
}
</code>

Si un jour, quelqu’un venait à reprendre votre code et apporter des modifications à cette barre de navigation, cette personne comprendrait en un rien de temps la fonction de chacun de ces sélecteurs. Il est clair que votre code est plus organisé et compréhensible.

<note>
D’ailleurs, notez bien, c’est important : les sélecteurs BEM sont toujours implémentés sous forme de classes.
</note>

Mais pourquoi ? 🤔

Vous devez être sûr que **vos sélecteurs ont une spécificité aussi basse que possible**. Souvenez-vous des règles de priorité, notamment le fait qu’un id  l’emportera toujours sur une classe.

Le but d’un **modificateur** est d’introduire une **règle contradictoire** et que celle-ci annule la règle originelle ; c’est pourquoi on utilise toujours des classes pour implémenter des sélecteurs BEM !

Dans notre exemple : notre modificateur changeait la couleur de notre lien en violet pour contrer la couleur originelle.


===== En résumé =====

  * 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 et prévoir votre structure avec BEM.
  * 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 : ''navbar''.
  * Les éléments indiquent le nom de leur bloc parent, suivi d’un double underscore/dunder (%%__%%) puis du rôle de l’élément : %%''navbar__link''%%.
  * 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 : ''%%navbar__link--purple%%''.
  * Les sélecteurs BEM sont toujours implémentés sous forme de classe.           

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 ; je crois que vous êtes prêt ! Entrons dans le vif du sujet avec **Sass**.


[[120_definir_les_priorites|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[140_utiliser_sass|Suivant ▷]]
wikinotes

Outils pour utilisateurs

Outils du site

Outils de la page
