Maîtriser le nommage CSS BEM avec des exemples pratiques : HTML pur, Angular et Next.js

Dans l'article précédent, nous avons exploré les bases de la convention de dénomination BEM en CSS et pourquoi elle est cruciale pour maintenir un code propre et évolutif.

Convention de dénomination CSS BEM : qu'est-ce que c'est, pourquoi c'est important et comment l'utiliser ?

Ahmet Erkan Paşahan ・ 14 septembre

#css #bem #html #programmation

Cette fois, nous approfondirons avec des exemples pratiques pour voir comment BEM fonctionne dans différents environnements : Pure HTML, Angular, et Next.js.

BEM ne se limite pas aux structures HTML de base ; il peut être appliqué efficacement dans n’importe quel framework frontend moderne. À la fin de cet article, vous comprendrez mieux comment implémenter BEM dans diverses configurations de développement.

Exemple 1 : Utilisation de BEM en HTML pur

Dans cet exemple, nous allons créer une carte de profil utilisateur qui change dynamiquement de style en fonction du statut en ligne ou hors ligne de l'utilisateur. Il s'agit d'un cas d'utilisation courant dans les applications du monde réel où les éléments doivent changer en fonction de l'état ou de la condition.

HTML :

<div class="user-card user-card--offline">
  <img src="profile.jpg" alt="User Avatar" class="user-card__avatar" />
  <div class="user-card__info">
    <h2 class="user-card__name">John Doe</h2>
    <p class="user-card__status">Offline</p>
  </div>
</div>

CSS :

.user-card {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #f5f5f5;
  max-width: 300px;
}

.user-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-card__info {
  display: flex;
  flex-direction: column;
}

.user-card__name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-card__status {
  font-size: 14px;
  color: #888;
}

.user-card--online {
  border-color: #4caf50;
  background-color: #e8f5e9;
}

.user-card--online .user-card__status {
  color: #4caf50;
}

.user-card--offline {
  border-color: #f44336;
  background-color: #ffebee;
}

.user-card--offline .user-card__status {
  color: #f44336;
}

Explication :

• La carte-utilisateur est le bloc représentant la carte du profil utilisateur.
• Modificateurs comme user-card--online et user-card--offline modifient l'apparence de la carte en fonction du statut de l'utilisateur.
• user-card__avatar, user-card__name et user-card__status sont des éléments du bloc user-card représentant respectivement l'avatar, le nom et le statut.
• L'utilisation de BEM indique clairement quels styles s'appliquent au bloc et quels styles changent en fonction du statut de l'utilisateur.

Exemple 2 : Application de BEM dans Angular

Dans cet exemple angulaire, nous allons créer un bouton interactif qui affiche un état de chargement lorsque vous cliquez dessus. Il s'agit d'un cas d'utilisation fréquent dans les formulaires ou les éléments interactifs où l'état du bouton change en fonction de l'interaction de l'utilisateur ou des appels d'API.

Composant angulaire (button.component.html) :

<button class="button" [ngClass]="{'button--loading': isLoading, 'button--primary': !isLoading}" (click)="handleClick()">
  <span *ngIf="!isLoading">{{ buttonText }}</span>
  <span *ngIf="isLoading">Loading...</span>
</button>

Styles de composants (button.component.css) :

.button {
  padding: 12px 24px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button--primary {
  background-color: #007BFF;
}

.button--loading {
  background-color: #666;
  cursor: not-allowed;
}

.button--loading span {
  font-size: 14px;
}

Logique des composants (button.component.ts) :

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {
  @Input() buttonText: string = 'Submit';
  isLoading: boolean = false;

  handleClick() {
    this.isLoading = true;

    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  }
}

Explication :

• Le bloc bouton représente le bouton de base.
• La directive [ngClass] ajoute dynamiquement un bouton en cours de chargement lorsque le bouton est dans un état de chargement et un bouton principal lorsqu'il est dans son état par défaut.
• Le texte du bouton change en fonction de l'état isLoading.
• La méthode handleClick simule un état de chargement et le réinitialise après 2 secondes, ce qui représente un scénario d'appel API typique.

Exemple 3 : implémentation de BEM dans Next.js

Dans cet exemple Next.js, nous allons créer un menu de navigation qui met en évidence la page active de manière dynamique. Il s'agit d'un scénario courant dans les applications Web où la page actuelle doit être indiquée visuellement dans la navigation.

Composant Next.js (components/NavBar.js) :

import { useRouter } from 'next/router';

export default function NavBar() {
  const router = useRouter();

  return (
    <nav className="nav">
      <ul className="nav__list">
        <li className={`nav__item ${router.pathname === '/' ? 'nav__item--active' : ''}`}>
          <a href="/" className="nav__link">Home</a>
        </li>
        <li className={`nav__item ${router.pathname === '/about' ? 'nav__item--active' : ''}`}>
          <a href="/about" className="nav__link">About</a>
        </li>
        <li className={`nav__item ${router.pathname === '/contact' ? 'nav__item--active' : ''}`}>
          <a href="/contact" className="nav__link">Contact</a>
        </li>
      </ul>
    </nav>
  );
}

Styles Next.js (styles/NavBar.module.css) :

.nav {
  background-color: #333;
  padding: 10px;
}

.nav__list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav__item {
  margin: 0;
}

.nav__link {
  color: white;
  text-decoration: none;
}

.nav__item--active .nav__link {
  font-weight: bold;
  color: #007BFF;
}

Explication :

• Le hook useRouter de Next.js est utilisé pour obtenir l'itinéraire actuel (router.pathname).
• Le modificateur nav__item--active est appliqué dynamiquement selon que la page actuelle correspond ou non à l'élément de menu.
• La page active est mise en évidence en changeant la couleur du texte et en mettant la police en gras.
• Le nav__link est un élément à l'intérieur du bloc nav__item.

Conclusion

L'utilisation de BEM dans votre projet vous permet de maintenir la cohérence et l'évolutivité de votre CSS, même lorsque vous traitez des composants dynamiques et des états changeants. En tirant parti de BEM pour la gestion des états, les changements de classe dynamiques et le style conditionnel, vous pouvez garder votre code structuré, modulaire et facile à maintenir.

Ces exemples détaillés montrent comment BEM peut être appliqué dans des applications du monde réel, facilitant ainsi la gestion de composants d'interface utilisateur complexes dans différents frameworks.

Suivez-moi pour plus de mises à jour !

J'espère que cet article vous a aidé à approfondir votre compréhension de l'utilisation de CSS BEM sur différentes plates-formes. Si vous êtes intéressé par plus d'articles, de conseils pratiques et d'informations sur le développement Web, assurez-vous de me suivre pour des mises à jour régulières. N'hésitez pas à nous contacter si vous avez des questions ou des commentaires : j'aimerais me connecter et avoir de vos nouvelles !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!