Структуриран CSS с BEM

От 0 , , , , Permalink

Повечето екипи си имат изградени или използват наготово различни методологии за структуриране на кода си, така че да е по-лесно четим, по-синтезиран, по-удобен за разргъщане, по-модулиран, по-разбираем за нови членове на екипа…Тук не става дума за framework, а за набор от правила при писане на код.

По отношение на структуриране на кода ми харесва идеята всеки екип синхронизирано да си организира кода, така че да е най-удобен за нуждите на съответния проект, като естествено може да се използват и логиките на вече съществуващи модели. Може би това е по-добрият вариант, когато става въпрос за малки проекти и малки екипи. От друга страна, когато проектът е дългосрочен, девелопърите често се сменят или екипа се разширява, по-добра перспектива за организация на кода ми дава по-масовия подход, тъй като всеки запознат с методологията лесно ще се включи без много загубено време в пояснения за найменоване на класове и организация на файлове.

Подходи в структурирането на CSS

SMACSS, OOCSS, BEM Methodologies

Три от най-силните подхода в тази посока са SMACSS и OOCSS и BEM.

BEM е методология за front-end разработчици създадена от Yandex. Съкращението BEM идва от Block, Element, Modifier и логиката му накратко може да бъде представена така:

Block

Block компонент от първо ниво се именова така
.component {}
Мислете за този елемент като за parent.

Element

Вътре в него следват няколко child елемента, които са съставни части на parent-а и се именоват
.component__child1 {}, .component__child2 {}, .component__child3 {}
като това са различни елементи, съдържащи се в главния и именовани с две долни черти между двете думи. Двете долни черти в името са индикация, че този клас описва child елемент, зависим от parent-а.

Modifier

Modifier-а е елемент от трето ниво и представя версия или различно състояние на block-а, което би изглеждало така
.component__child1–dotted {} или .component__child1–blue {}

Събран на едно кода би изглеждал така

See the Pen mJpKLY by Sun (@ph1x) on CodePen.

Поглеждайки само маркъпа с тези класове става ясно кой клас какво описва и кой от кой зависи – кода става много по-четим и предсказуем, съответно по-лесен за поддръжка и надграждане.

Защо се изписва с две, а не с едно тире или долна черта?

Тъй като често в името на селекторите може да има тире или долна черта двете тирета или долни черти са разграничение между име на селектор и неговото логическо място в структурата.

За и против

Някои девелопъри намират подобен синтаксис за доста грозен и визуално изкривен, други преодоляват този недостатък и се възползват от предимствата му – съответно BEM има и фенове и опоненти и такива, които частично го използват. И е логично да има поне две-три мнения. Писането и структурирането на кода е като секса – в много случай няма правилно и грешно, въпросът е резултатът да се харесва на всички участници, да работи както трябва и да са спазени елементрани правила на структуриране и организация. Всеки според цената, срока и възможностите си определя как да структурира творенията си, но в крайна сметка опит за подобряване на четимостта и организацията като BEM си заслужава да се поразгледа и си струва пробата.

Ресурси

A New Front-End Methodology: BEM – задълбочен преглед на девелопър от Yandex
MindBEMding – getting your head ’round BEM syntax – повече подробности около синтаксиса

Ъпдейт

BEMIT: Taking the BEM Naming Convention a Step Further
CSS Modules

Коментари през Facebook

Коментирай първи.

Остави коментар

Your email address will not be published. Required fields are marked *