Paras johdatus BEM: ään on Harry Robertsilta:
BEM - eli lohko, elementti, muunnin - on etupään nimeämismenetelmä, jonka kaverit ovat keksineet Yandexissä. Se on älykäs tapa nimetä CSS-luokkasi, jotta saat lisää läpinäkyvyyttä ja merkitystä muille kehittäjille. Ne ovat paljon tiukempia ja informatiivisempia, mikä tekee BEM-nimityskäytännöstä ihanteellisen kehitystiimeille suuremmissa projekteissa, jotka saattavat kestää jonkin aikaa.
Sass 3.3: n jälkeen voimme kirjoittaa tällaisia asioita:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )Niin kauan kuin CSS-säännöt ovat lyhyitä ja perusvalitsin on yksinkertainen, luettavuus pysyy kunnossa. Mutta kun asiat monimutkaisevat, tämän syntaksin vuoksi on vaikea selvittää, mitä tapahtuu. Tämän vuoksi meillä voi olla houkutus rakentaa kaksi kääreyhdistelmää BEM-syntaksiamme varten:
/// 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; ) )Aikaisemman esimerkin uudelleenkirjoittaminen upouusilla sekoituksillamme:
.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` */ ) ) )Huomaa, että merkkijonojen ympärillä olevat lainaukset ovat valinnaisia, lisäämme ne vain luettavuuden lisäämiseksi.
Jos nyt haluat elementja modifierolet liian pitkä kirjoittamaan, voit luoda kaksi lyhyempää aliasta, kuten:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Aliaksien käyttäminen:
.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` */ ) ) )