Najlepsze wprowadzenie do BEM pochodzi od Harry'ego Robertsa:
BEM - czyli blok, element, modyfikator - to front-endowa metodologia nazewnictwa wymyślona przez pracowników Yandex. Jest to sprytny sposób nazywania klas CSS, aby nadać im większą przejrzystość i znaczenie dla innych programistów. Są znacznie bardziej rygorystyczne i zawierają dużo informacji, co sprawia, że konwencja nazewnictwa BEM jest idealna dla zespołów programistów zajmujących się większymi projektami, które mogą chwilę potrwać.
Od wersji Sass 3.3 możemy napisać takie rzeczy:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Dopóki reguły CSS są krótkie, a selektor podstawowy prosty, czytelność pozostaje w porządku. Ale kiedy sprawy stają się bardziej złożone, składnia ta utrudnia ustalenie, co się dzieje. Z tego powodu możemy ulec pokusie zbudowania dwóch pakietów opakowujących dla naszej składni 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; ) )Przepisując nasz poprzedni przykład za pomocą naszych zupełnie nowych miksów:
.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` */ ) ) )Zauważ, że cudzysłowy wokół łańcuchów są opcjonalne, dodajemy je tylko dla dodatkowej czytelności.
Teraz, jeśli masz ochotę pisać elementi modifierjesteś za długi, możesz utworzyć dwa krótsze aliasy, takie jak:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Korzystanie z aliasów:
.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` */ ) ) )