BEM'e en iyi giriş Harry Roberts'tan:
BEM - blok, öğe, değiştirici anlamına gelir - Yandex'deki görevliler tarafından tasarlanan bir ön uç adlandırma metodolojisidir. Diğer geliştiricilere daha fazla şeffaflık ve anlam kazandırmak için CSS sınıflarınızı adlandırmanın akıllıca bir yoludur. Çok daha katı ve bilgilendiricidirler, bu da BEM adlandırma kuralını, bir süre dayanabilecek daha büyük projelerdeki geliştirici ekipleri için ideal kılar.
Sass 3.3'ten beri şöyle şeyler yazabiliriz:
.block ( /* CSS declarations for `.block` */ &__element ( /* CSS declarations for `.block__element` */ ) &--modifier ( /* CSS declarations for `.block--modifier` */ &__element ( /* CSS declarations for `.block--modifier__element` */ ) ) )CSS kuralları kısa ve temel seçici basit olduğu sürece, okunabilirlik sorunsuz kalır. Ancak işler daha karmaşık hale geldiğinde, bu sözdizimi neler olup bittiğini anlamayı zorlaştırır. Bu nedenle, BEM sözdizimimiz için iki sarmalayıcı karışımı oluşturmak cazip gelebilir:
/// 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; ) )Bir önceki örneğimizi yepyeni karışımlarımızla yeniden yazmak:
.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` */ ) ) )Dizelerin etrafındaki alıntıların isteğe bağlı olduğunu, yalnızca daha fazla okunabilirlik için onları eklediğimizi unutmayın.
Eğer gibi hissediyorum, şimdi elementve modifiertürüne çok uzun, bu kadar benzeyen iki kısa adlar oluşturabilir:
/// @alias element @mixin e($element) ( @include element($element) ( @content; ) ) /// @alias modifier @mixin m($modifier) ( @include modifier($modifier) ( @content; ) )Takma adlar kullanma:
.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` */ ) ) )