La meilleure introduction à BEM est de Harry Roberts:
BEM - qui signifie bloc, élément, modificateur - est une méthodologie de dénomination frontale conçue par les gars de Yandex. C'est une façon intelligente de nommer vos classes CSS pour leur donner plus de transparence et de signification pour les autres développeurs. Ils sont beaucoup plus stricts et informatifs, ce qui rend la convention de dénomination BEM idéale pour les équipes de développeurs sur des projets plus importants qui pourraient durer un certain temps.
Depuis Sass 3.3, nous pouvons écrire des choses comme ceci:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Tant que les règles CSS sont courtes et que le sélecteur de base est simple, la lisibilité reste correcte. Mais lorsque les choses deviennent plus complexes, cette syntaxe rend difficile de comprendre ce qui se passe. Pour cette raison, nous pourrions être tentés de créer deux mixins wrapper pour notre syntaxe BEM:
/// Block Element /// @access public /// @param (String) $element - Element's name @mixin element($element) ( &__#($element) ( @content; ) ) /// Block Modifier /// @access public /// @param (String) $modifier - Modifier's name @mixin modifier($modifier) ( &--#($modifier) ( @content; ) )Réécriture de notre exemple précédent avec nos tout nouveaux mixins:
.block ( /* CSS declarations for `.block` */ @include element('element') ( /* CSS declarations for `.block__element` */ ) @include modifier('modifier') ( /* CSS declarations for `.block--modifier` */ @include element('element') ( /* CSS declarations for `.block--modifier__element` */ ) ) )Notez que les guillemets autour des chaînes sont facultatifs, nous les ajoutons uniquement pour une meilleure lisibilité.
Maintenant, si vous avez envie elementet que vous modifierêtes trop long à taper, vous pouvez créer deux alias plus courts comme ceci:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Utilisation d'alias:
.block ( /* CSS declarations for `.block` */ @include e('element') ( /* CSS declarations for `.block__element` */ ) @include m('modifier') ( /* CSS declarations for `.block--modifier` */ @include e('element') ( /* CSS declarations for `.block--modifier__element` */ ) ) )