4. • Chaque règle CSS a potentiellement une portée globale
• Le rendu peu devenir imprédictible à cause de l’effet de
cascade
• L’ordre de nos règles CSS détermine le rendu
• Collision des noms de classe
Problématiques
6. • Méthodologie de nommage et de classification des sélecteurs
CSS
• Créer par Yandex à l’origine l’un des plus important moteur de
recherche russe
• Blocks - Elements - Modifiers
BEM
7. • Un développement rapide et maintenable
• Un projet qui implique plusieurs développeurs
• Des équipes scalables
• Un code réutilisable
Objectifs
8. Un block est une entité indépendante. Elle a son propre
contexte autonome. Il peut être simple ou composé.
• Ne jamais utilisé de markups ni de ID comme sélécteur
• Sémantique
Ex. : header
Block
9. Un élément est une partie d’un block qui a une certaine
fonction. Le contexte d’un élément est celui du block.
• Sémantique
Ex. : header__logo
Elements
10. Un modifieur est une propriété qui sert à créer des variantes. Il
existe des modifieurs de blocks et des modifieurs d’éléments.
• non sémantique
Ex. : header--black
header__logo--smallSize
Modifieur
16. Les avantages
• La méthodologie de nomenclature apporte de la
signification au nom de nos classes
• BEM transforme notre CSS en un ensemble de composant,
ce qui rend les modifications plus prédictibles, une plus
grande portabilité ( donc de productivité et de qualité)
• Une meilleure séparation entre le HTML et le CSS
• Évite les cascades de css trop longue
• Évite les collisions de nom de classe
17. Les inconvénients
• C’est moche
• C’est long (mais, on a tous l’autocomplétion, non ?)
• Surcharge le HTML avec des noms de classes
• Les frameworks HTML n’utilisent pas forcément BEM
