Labākais BEM ievads ir Harijs Robertss:
BEM - kas nozīmē bloku, elementu, modifikatoru - ir front-end nosaukšanas metodika, ko izdomājuši Yandex puiši. Tas ir gudrs veids, kā nosaukt savas CSS klases, lai piešķirtu tām lielāku pārredzamību un nozīmi citiem izstrādātājiem. Tie ir daudz stingrāki un informatīvāki, kas padara BEM nosaukumu piešķiršanas konvenciju ideālu izstrādātāju komandām lielākos projektos, kas varētu ilgt kādu laiku.
Kopš Sass 3.3 mēs varam rakstīt šādas lietas:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Kamēr CSS kārtulas ir īsas un bāzes selektors ir vienkāršs, lasāmība paliek kārtībā. Bet, kad viss kļūst sarežģītāk, šī sintakse apgrūtina izdomāt, kas notiek. Tāpēc mums varētu rasties kārdinājums izveidot divus iesaiņojuma maisījumus mūsu BEM sintaksei:
/// 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; ) )Pārrakstot mūsu iepriekšējo piemēru ar mūsu pavisam jaunajiem maisījumiem:
.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` */ ) ) )Ņemiet vērā, ka pēdiņas ap virknēm nav obligātas, mēs tās pievienojam tikai papildu lasāmībai.
Tagad, ja vēlaties elementun modifieresat pārāk garš, lai rakstītu, varat izveidot divus īsākus aizstājvārdus, piemēram:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Pseidonīmu izmantošana:
.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` */ ) ) )