BEM dans Vue : styles pour les composants

BEM dans Vue : structurer les styles pour des composants évolutifs

BEM reste pertinent dans les projets Vue grâce à sa hiérarchie stricte de classes, qui évite les conflits de styles dans une architecture basée sur les composants. Vue gère la réactivité et la logique, tandis que BEM garantit l'indépendance des blocs et éléments. Cette combinaison minimise l'enchevêtrement CSS au fur et à mesure que l'application grandit.

BEM repose sur trois principes fondamentaux :

• Bloc : une entité autonome comme .header ou .card, sans dépendances externes.
• Élément : une sous-partie d'un bloc, notée par double tiret bas — .button__icon.
• Modificateur : une variante ou un état via un simple tiret bas — .button_disabled, .card_theme_dark.

Cette structure isole les styles, rendant le débogage et la refactorisation faciles.

Stylisation dans les composants Vue

Dans Vue, les styles se placent dans <style scoped>, limitant leur portée au composant. Le scoped évite les fuites de styles, mais attention à l'imbrication profonde.

Utilisez :deep() uniquement pour intégrer des bibliothèques externes où le scoped est insuffisant. Évitez-le pour bidouiller votre architecture — c'est un signal d'alarme de problèmes structurels.

BEM s'accorde parfaitement avec scoped en regroupant logiquement les classes. Le bloc définit le style de base, les modificateurs gèrent les variantes, et les éléments structurent l'intérieur.

Exemple pratique : bouton avec états

Sans système, les classes prolifèrent de manière chaotique. Voici un piège classique :

<template>
  <button :class="{
    'button-basic': isBasic,
    'button-href': isHref,
    'button-avatar': isAvatar 
  }">
    {{ text }}
  </button>
</template>

Problèmes :

• Pas de hiérarchie : les classes ne sont pas liées à un bloc.
• Évolutivité : nouveaux états = plus de conditions.
• Lisibilité : la logique se perd avec le temps.

Avec BEM, le template s'allège et s'auto-documente :

<template>
  <button :class="[
    'button',
    {
      'button_disabled': disabled,
      'button_loading': loading,
    },
    {
      'button_size_xl': size === 'xl',
      'button_size_l': size === 'l',
    },
    {
      'button_primary': color === 'primary',
      'button_secondary': color === 'secondary',
    }
  ]">
    {{ text }}
  </button>
</template>

Les classes sont regroupées par sémantique : bloc de base, états, tailles, thèmes. En CSS :

.button {
  /* styles de base */
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
}

.button_disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button_loading {
  position: relative;
}

.button_primary:not(.button_disabled):hover {
  background-color: #0055ff;
}

Le sélecteur :not() filtre les états conflictuels sans classes supplémentaires.

Évolutivité et collaboration en équipe

Dans les gros projets, BEM réduit la charge cognitive : les devs voient le bloc et ses modificateurs directement dans le template. Pas besoin de fouiller le CSS pour comprendre les styles.

Avantages pour l'équipe :

• Prévisibilité : les noms de classes reflètent leur rôle.
• Isolation : les blocs ne s'interfèrent pas.
• Extensibilité : ajoutez des modificateurs sans refonte.

Exemple de composant complexe — carte produit avec thèmes et tailles :

<template>
  <div class="card" :class="[
    `card_size_${size}`,
    `card_theme_${theme}`
  ]">
    <div class="card__image"></div>
    <div class="card__title">{{ title }}</div>
    <button class="card__button button">Acheter</button>
  </div>
</template>

Les éléments à l'intérieur du bloc héritent du contexte tout en restant indépendants.

Quand éviter BEM

BEM est excessif pour les prototypes ou pages d'atterrissage : Tailwind ou classes utilitaires sont plus rapides. Réservez BEM aux projets long terme avec équipes et interfaces complexes.

Points clés

• BEM complète Vue avec une hiérarchie stricte, sans conflits avec les styles scoped.
• Les modificateurs regroupent états et variantes, simplifiant les templates.
• :deep() est réservé aux libs externes, pas aux bidouilles internes.
• Dans les gros projets, BEM accélère l'onboarding et la refactorisation.
• Testez sur un vrai composant : la lisibilité s'améliore instantanément.

— Editorial Team