Parim sissejuhatus BEM-i on Harry Robertsilt:
BEM - mis tähendab plokki, elementi, modifikaatorit - on esiotsa nimetamismetoodika, mille on välja mõelnud Yandexi kutid. See on nutikas viis oma CSS-klasside nimetamiseks, et anda neile teistele arendajatele rohkem läbipaistvust ja tähendust. Need on palju rangemad ja informatiivsemad, mis muudab BEM-i nimetamise konventsiooni ideaalseks arendajate meeskondadele suuremates projektides, mis võivad mõnda aega kesta.
Alates Sass 3.3-st võime kirjutada selliseid asju:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Kuni CSS-reeglid on lühikesed ja baasvalija on lihtne, on loetavus endiselt okei. Kuid kui asjad muutuvad keerukamaks, on selle süntaksiga raske aru saada, mis toimub. Seetõttu võib meil tekkida kiusatus ehitada meie BEM-i süntaksile kaks ümbrist:
/// 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; ) )Oma eelmise näite ümberkirjutamine meie uhiuute miksi abil:
.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` */ ) ) )Pange tähele, et stringide ümber olevad jutumärgid on valikulised, lisame need ainult täiendava loetavuse huvides.
Kui soovite sisestada elementja modifierolete liiga pikk, võite luua kaks lühemat varjunime, näiteks:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Pseudonüümide kasutamine:
.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` */ ) ) )