Cea mai bună introducere în BEM este de la Harry Roberts:
BEM - adică bloc, element, modificator - este o metodologie de denumire front-end gândită de băieții de la Yandex. Este un mod inteligent de a denumi clasele dvs. CSS pentru a le oferi mai multă transparență și semnificație altor dezvoltatori. Acestea sunt mult mai stricte și mai informative, ceea ce face convenția de numire BEM ideală pentru echipele de dezvoltatori din proiecte mai mari care ar putea dura o vreme.
De la Sass 3.3, putem scrie lucruri de genul acesta:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Atâta timp cât regulile CSS sunt scurte și selectorul de bază este simplu, lizibilitatea rămâne în regulă. Dar când lucrurile devin mai complexe, această sintaxă face dificilă înțelegerea a ceea ce se întâmplă. Din această cauză, s-ar putea să fim tentați să construim două mixuri de înfășurare pentru sintaxa noastră 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; ) )Rescrierea exemplului nostru anterior cu noile noastre mixine:
.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` */ ) ) )Rețineți că ghilimelele din jurul șirurilor sunt opționale, le adăugăm doar pentru o citire suplimentară.
Acum, dacă îți vine elementși modifierești prea lung pentru a tasta, poți crea două aliasuri mai scurte, așa:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Utilizarea pseudonimelor:
.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` */ ) ) )