Learn BEM CSS with examples in 1 minute

Apprenez BEM CSS avec des exemples en 1 minute

Voulez-vous créer du code plus efficace et plus gérable en CSS ?

Avec BEM CSS, vous pouvez facilement nommer et ordonner vos blocs, ce qui facilite la compréhension et la gestion de votre code.

De plus, BEM facilite la modularité et la réutilisation du code.

Commencez dès aujourd’hui avec BEM et constatez les avantages par vous-même !

Qu’est-ce que BEM CSS ?

BEM signifie Block Element Modifier, et c'est une façon de nommer vos éléments afin qu'ils soient plus faciles à comprendre et à gérer. BEM CSS est un excellent moyen de garder vos fichiers CSS organisés et faciles à lire.

  • Cela aide à créer des composants réutilisables
  • Favorise la modularité du code CSS
  • Cela rend votre code lisible et évolutif
  • Fournit une faible spécificité dans les sélecteurs CSS

Il est recommandé de l'utiliser avec un préprocesseur CSS comme Sass. Mais il peut également être utilisé sans préprocesseur.

Exemples CSS BEM

La syntaxe de BEM est très simple.

  • .bloc
  • .block--modificateur
  • .block__element
  • .block__element--modificateur

Bloc:

C'est un composant de niveau supérieur ou le bloc principal.

Exemple:

  • (.carte)
  • (.article)
  • (.btn)

Élément:

Les éléments sont les pièces qui construisent un bloc.

Exemple:

  • (.card__titre)
  • (.article__content)
  • (.btn__icône)

Modificateur:

C'est comme des variantes du bloc ou d'un élément. Comme (.btn--primary, .card--lg)

Exemple:

  • (.card--lg, .card__title--light)
  • (.article--vedette, .article__content--sm)
  • (.btn--primaire, .btn__icon--animate)

Conclusion

Si vous cherchez à rationaliser votre processus de développement CSS, BEM pourrait être la convention de dénomination !

Comme expliqué en détail dans cet article, BEM CSS est un excellent moyen d'améliorer votre flux de travail de développement CSS et de rendre votre code plus organisé, lisible et maintenable.

Alors pourquoi ne pas essayer ?

Vous pouvez en savoir plus sur BEM ou explorer les exemples fournis dans cette aide-mémoire BEM .

Nos guides de codage :