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 .
![[SOLVED] Order status has changed from pending payment to failed. Please retry.](http://www.coderchamp.com/cdn/shop/articles/bd63849d174920a2cb26dc60f32a1184.jpg?v=1698714883&width=580)
