Articles
Introduction au CSS
CSS et BEM

CSS et BEM

Cet article explique le CSS et le BEM.

YouTube Video

HTML pour l'aperçu

css-bem.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>BEM Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-bem.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS &amp; BEM(Block Element Modifier)</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>BEM Example</h2>
20        </header>
21        <article>
22            <h3>BEM HTML Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25<pre class="sample">
26&lt;div class=&quot;button button--primary&quot;&gt;
27    &lt;span class=&quot;button__text&quot;&gt;Click Me&lt;/span&gt;
28&lt;/div&gt;
29</pre>
30            </section>
31        </article>
32        <article>
33            <h3>BEM Example</h3>
34            <section>
35                <header><h4>HTML</h4></header>
36<pre class="sample">
37&lt;header class=&quot;header&quot;&gt;
38    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
39    &lt;nav class=&quot;header__nav&quot;&gt;
40        &lt;ul class=&quot;header__menu&quot;&gt;
41            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
42            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
43            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
44        &lt;/ul&gt;
45    &lt;/nav&gt;
46&lt;/header&gt;
47</pre>
48            </section>
49            <header><h4>HTML+CSS</h4></header>
50            <section class="sample-view">
51                <header class="header">
52                    <div class="header__logo">My Logo</div>
53                    <nav class="header__nav">
54                        <ul class="header__menu">
55                            <li class="header__menu-item header__menu-item--active">Home</li>
56                            <li class="header__menu-item">About</li>
57                            <li class="header__menu-item">Contact</li>
58                        </ul>
59                    </nav>
60                </header>
61            </section>
62        </article>
63        <article>
64            <h3>BEM Example</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67<pre class="sample">
68&lt;header class=&quot;header&quot;&gt;
69    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
70    &lt;nav class=&quot;header__nav&quot;&gt;
71        &lt;ul class=&quot;header__menu&quot;&gt;
72            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
73            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
74            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
75            &lt;li class=&quot;header__menu-item header__menu-item--disabled&quot;&gt;Disabled&lt;/li&gt;
76        &lt;/ul&gt;
77    &lt;/nav&gt;
78&lt;/header&gt;
79</pre>
80            </section>
81            <header><h4>HTML+CSS</h4></header>
82            <section class="sample-view">
83                <header class="header">
84                    <div class="header__logo">My Logo</div>
85                    <nav class="header__nav">
86                        <ul class="header__menu">
87                            <li class="header__menu-item header__menu-item--active">Home</li>
88                            <li class="header__menu-item">About</li>
89                            <li class="header__menu-item">Contact</li>
90                            <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91                        </ul>
92                    </nav>
93                </header>
94            </section>
95        </article>
96    </main>
97</body>
98</html>

CSS et BEM : Une approche pour une gestion efficace des styles

Le CSS est un langage fondamental utilisé pour définir l'apparence d'un site web. Cependant, gérer efficacement le CSS peut être difficile, en particulier pour les projets de grande envergure. BEM (Block Element Modifier) est une convention de nommage CSS conçue pour résoudre ces problèmes et améliorer la réutilisabilité et la maintenabilité.

Défis du CSS et besoin de BEM

Les défis du CSS comprennent les problèmes suivants :.

  1. Collision d'espaces de noms globaux : En CSS, les noms de classes sont globaux, ce qui risque de provoquer des collisions entre différents composants.
  2. Surutilisation de sélecteurs complexes : Des sélecteurs descendants ou ID trop complexes augmentent la spécificité, rendant les modifications futures difficiles.
  3. Réutilisabilité réduite : Les styles spécifiques deviennent plus difficiles à réutiliser dans d'autres composants.

BEM a été conçu pour résoudre ces problèmes.

Concepts de base de BEM

BEM se compose de trois éléments principaux :.

  1. Bloc (Block) : Un composant indépendant ayant sa propre signification.
  2. Élément (Element) : Une partie d'un bloc, logiquement connectée à celui-ci.
  3. Modificateur (Modifier) : Modifie l'apparence ou le comportement d'un bloc ou d'un élément.

Les conventions de nommage BEM suivent le format ci-dessous :.

.block__element--modifier
  • bloc : Le nom du composant du bloc.
  • élément : Un élément qui fait partie du bloc.
  • modificateur : Représente un état spécifique ou une variation de style.

Exemple pratique

Voici un exemple simple.

1<div class="button button--primary">
2  <span class="button__text">Click Me</span>
3</div>
  • button est un bloc.
  • button__text est un élément.
  • button--primary est un modificateur.

Avantages de BEM

Voici les avantages de BEM.

  • Cohérence Comme la convention de nommage est cohérente, le code devient plus facile à lire.
  • Réutilisabilité Il devient plus facile de réutiliser les composants.
  • Maintenabilité Les autres développeurs peuvent comprendre le code plus facilement, ce qui facilite les modifications.

Construire un projet en utilisant BEM

Conception HTML

Voici un exemple de HTML qui applique BEM.

 1<header class="header">
 2  <div class="header__logo">My Logo</div>
 3  <nav class="header__nav">
 4    <ul class="header__menu">
 5      <li class="header__menu-item header__menu-item--active">Home</li>
 6      <li class="header__menu-item">About</li>
 7      <li class="header__menu-item">Contact</li>
 8    </ul>
 9  </nav>
10</header>

Conception CSS

Rédigez le CSS correspondant au HTML comme suit.

 1.header {
 2  background-color: #333;
 3  color: #fff;
 4  padding: 10px;
 5}
 6
 7.header__logo {
 8  font-size: 24px;
 9}
10
11.header__nav {
12  display: flex;
13  justify-content: space-around;
14}
15
16.header__menu {
17  list-style: none;
18  margin: 0;
19  padding: 0;
20  display: flex;
21}
22
23.header__menu-item {
24  margin: 0 10px;
25  padding: 5px 10px;
26}
27
28.header__menu-item--active {
29  font-weight: bold;
30  border-bottom: 2px solid #fff;
31}
  • Ce CSS définit des styles modulaires en utilisant la convention BEM (Block Element Modifier) afin d'améliorer la réutilisabilité et la maintenabilité.

Extension des styles

Voyons comment ajouter un nouveau modificateur pour rendre un élément de menu spécifique inactif.

Le HTML correspondant ressemblerait à ceci.

1<li class="header__menu-item header__menu-item--disabled">Disabled</li>
1.header__menu-item--disabled {
2  opacity: 0.5;
3  pointer-events: none;
4}
  • Ce CSS définit un modificateur qui atténue visuellement les éléments inactifs du menu et désactive les interactions de clic.

Questions Fréquemment Posées

Lors de l'utilisation de BEM, les points suivants peuvent être gardés à l'esprit.

Q1 : Dois-je me conformer strictement aux conventions de nommage de BEM ?

Il n'est pas nécessaire de suivre strictement les règles de nommage de BEM, mais il est important de maintenir la cohérence. Établissez des règles unifiées dans le projet et assurez-vous que toute l'équipe les respecte.

Q2 : L'introduction de BEM ne rend-elle pas le CSS plus verbeux ?

L'introduction de BEM peut entraîner des noms de classes CSS plus longs, mais cela rend les rôles des composants plus clairs. En conséquence, la maintenabilité s'améliore et les avantages l'emportent sur la redondance.

Q3 : BEM peut-il être utilisé avec d'autres frameworks CSS ?

BEM peut être utilisé avec d'autres frameworks CSS. Par exemple, même en utilisant Tailwind CSS ou Bootstrap, vous pouvez appliquer BEM aux composants personnalisés.

Conclusion

BEM propose une convention de nommage claire pour modulariser le CSS et le rendre plus facile à gérer. En utilisant cette méthode, vous pouvez éviter les conflits de styles et améliorer considérablement la maintenabilité et la réutilisabilité. La conception de conventions de nommage appropriées contribue à améliorer la qualité et la productivité du projet.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriété `aspect-ratio` et conception réactive