BEM nədir?(CSS metodologiyası 1)

BEM — Block Element Modifier deməkdir. CSS metodologiyasıdır. 2009 cu ildə Yandex programistləri tərəfindən yaradılmışdır. Bu gün böyük layihələrlə işləyən zaman CSS da adlandırma etmək yəni classlara ad vermək ən çətin və programistlərin ən çox vaxtını alan məsələlərdən biridir.

BEM adlandırmanı bəlli bir standart altına almışdır.

Block Element Modifier adlarının hardan gədiyinə baxaq.

Blocklar

Blocklar dizaynda ən böyük elementlərdir. Ümumilikdə bir neçə komponentdən ibarət olurlar.

Məsələn Facebook .header , .right-sidebar , .left-sidebar , .main kimi blocklara bölünür.

Ayrıca bloklar başqa bloklarıda əhatə edə bilir.

Məsələn .headerdə

Blockları vardır.

Element:

Elementler block içində olanlardır.

Modifier

Modifier hər hansı bir elementin məsələn Button elementinin digərlərindən fərqli olaraq göy rəngdə olması.

Bir card elementini nəzərdən keçirək

Yazılış şəkli.

SCSS ilə BEM yazmaq olduqca sərfəli və rahatdır.

Məsələn fərz edəkki əlimizdə bir card var.

Bu elementin HTML structuru aşağıdakı formada olacaq.

<div class=”card”>
<p class=”card__text”></p>
<button class=”card__button — whiteRadius”></button>
</div>

Burada Card əsas block card__text və card__button elementlər

— whiteRadius isə modifierdir.

SCSSdə bu cardın strukturu isə.

.card{

&__text{ /*CSS PROPERTIES*/ }

&__button{ /*CSS PROPERTIES*/ }

}

BEM İstifadə etmək…

• Kodun təkrar istifad edilməsinə kömək edir.
• HTML faylını daha oxunabilir edir.
• BEM adlandırması bütün texnologiyalarda eynidir (html,css,javascript).
• Dizayna baxanda nəyin Modifier nəyin Element olduğunun anlamaq olur.
• BEM sintaksisi daha tez css kodlamağa kömək edir.
• Adlandırmalar uzun olsada oxunurluğu olduqca sadədir.

BEM ilə uzunca bir class adı yarada bilərik. Lakin bunun CSS faylının həcmini artırdığını düşünə bilərsizniz. Doğrudur artır lakin gzip istifadə edərək faylın ölçüsünü kiçildə bilərsiniz.