A BEM legjobb bevezetője Harry Roberts:
A BEM - jelentése blokk, elem, módosító - egy olyan front-end elnevezési módszertan, amelyet a Yandex srácai gondoltak ki. Intelligens módszer a CSS-osztályok elnevezésére, hogy nagyobb átláthatóságot és értelmet nyújtson más fejlesztők számára. Sokkal szigorúbbak és informatívabbak, emiatt a BEM névadási konvenció ideális a nagyobb projektek fejlesztői csapatai számára, amelyek egy ideig tarthatnak.
A Sass 3.3 óta ilyen dolgokat írhatunk:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Amíg a CSS-szabályok rövidek és az alapválasztó egyszerű, addig az olvashatóság rendben marad. De amikor a dolgok bonyolultabbá válnak, ez a szintaxis megnehezíti, hogy kiderüljön, mi történik. Emiatt megkísérelhetünk két csomagoló mixert készíteni a BEM szintaxisunkhoz:
/// 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; ) )Új példánk átírása vadonatúj keverékeinkkel:
.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` */ ) ) )Vegye figyelembe, hogy a karakterláncok körüli idézőjelek nem kötelezőek, csak az extra olvashatóság érdekében adjuk hozzá őket.
Most, ha van kedve elementés modifiertúl hosszú a gépeléshez, létrehozhat két rövidebb álnevet, így:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Álnevek használata:
.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` */ ) ) )