Najlepší úvod do BEM je od Harryho Robertsa:
BEM - čo znamená blok, prvok, modifikátor - je front-endová metodika pomenovania, ktorú vypracovali chlapci v spoločnosti Yandex. Je to šikovný spôsob, ako pomenovať svoje triedy CSS, aby ste im poskytli väčšiu transparentnosť a význam pre ostatných vývojárov. Sú oveľa prísnejšie a informatívnejšie, vďaka čomu je konvencia pomenovania BEM ideálna pre tímy vývojárov na väčších projektoch, ktoré môžu chvíľu trvať.
Od verzie Sass 3.3 môžeme písať tieto veci:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Pokiaľ sú pravidlá CSS krátke a selektor základne jednoduchý, čitateľnosť zostáva v poriadku. Ale keď sa to stane zložitejším, táto syntax sťažuje zisťovanie, o čo ide. Z tohto dôvodu by nás mohlo lákať vytvoriť dva obalové mixiny pre našu BEM syntax:
/// 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; ) )Prepisujeme náš predchádzajúci príklad našimi úplne novými mixínmi:
.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` */ ) ) )Upozorňujeme, že úvodzovky okolo reťazcov sú voliteľné, pridávame ich iba kvôli lepšej čitateľnosti.
Teraz, ak máte chuť elementa ste modifierpríliš dlho na písanie, môžete vytvoriť dva kratšie aliasy, napríklad takto:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Používanie aliasov:
.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` */ ) ) )