Бързо въведение към блоковите модификатори на елементи (BEM)

Модификатор на блокови елементи

Здрасти! Значи искате да придобиете по-добро разбиране на BEM? Предполагам, че ако четете това, може да не знаете какво означава BEM. В случай, че нямате, това е съкращение от Block Element и Modifier.

Какво е BEM?

BEM е методология за проектиране, която ви помага да създавате компоненти за многократна употреба и споделяне на код в разработването. - getbem.com

Това означава, че BEM е система от методи, която ви помага да напишете своя HTML и CSS код, така че да е лесно да се използва повторно и споделя с други части от вашия код.

BEM в действие.

Така че сега знаете дефиницията на BEM, но може да не знаете как изглежда или как работи. Както казах по-рано, BEM е съкращение, така че нека разгледаме всяка от тези думи и какво означават.

блок

"Блок" се отнася до всяко образувание, което може да стои самостоятелно и все още има смисъл. Примери за блокове са заглавка, въвеждане и отметка. Примери за неща, които не са блокове, са заглавия на заглавия, елемент в списък или етикет за отметка.

Ако трябва да премахнем текста, който обозначава радиовход и да го поставим самостоятелно, той вече няма смисъл.

Виж това:

Ако очертаната част се раздели на отделни блокове, те вече няма да имат смисъл за потребителя.

Това е истинско разделяне на блокове:

Ако премахна някой от тези блокове и го изхвърлих, другият блок все пак ще има някакъв смисъл за потребителя. Макар че в този случай няма да е полезно за потребителя, защото е радио бутон вместо квадратче за отметка.

Важно е да гледате на блока като на всяка комбинация (или единен HTML маркер) от няколко елемента (или други блокове) по начин, който има смисъл за потребителя, когато е поставен сам.

елементи

Един елемент трябва да бъде малко по-лесен за разбиране сега, тъй като го обясних, когато говорих за блокове. Онези части от блок, които нямат семантично значение извън блока, са елементи.

Нека да разгледаме това отново:

Маркираните части са елементи, защото помагат да се определи какво е блокът.

Кодът на заснетия по-горе екран ще изглежда така:

Имаме три елемента, които съставят блока с опции: option__text, option__radio-бутон, option__note. И все пак бихме могли да променим един от тези елементи в свой собствен блок:

Елементът вариант__note вече е бележка за блок. Това означава, че можем да намерим бележка извън блока с опции по начин, който е полезен за потребителя.

Модификатор

Модификатор е флаг, който променя начина, по който изглежда блок или елемент. Например:

Двата бутона са един и същи блок, но изглеждат различно. Мощността, която BEM ни дава, ни позволява да използваме един и същ блок два пъти и все пак да ги накараме да изглеждат много различно.

Нека да видим как изглежда кодът за това:

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

Според правилата на BEM, бутонът на нашия флаг - зеленият има „страничен ефект“, който може да доведе до объркване, което е свойството box-shadow. Нашият флаг прави нещо, за което името му не ни казва. Но това е наред, защото в нашия малък проект никога няма да имаме зелен бутон с кутия-сянка. Ако някога го направим, можем да разбием знамето:

Сега, когато имаме нужда от зелен бутон със сянка на кутията, ще добавим само бутона - зелен флаг. Същото се отнася и за свойството цвят.

заключение

BEM е много приятен начин да напишете и структурирате вашия HTML и CSS код. Това ръководство не покрива 100% от всичко BEM, но би трябвало да е достатъчно, за да ви даде добро разбиране на методологията. Можете да прочетете повече за BEM тук.

Надявам се, че сте научили нещо от това и че имате по-добро разбиране на BEM и как изглежда в реалния свят. Ако го направите, не се колебайте да оставите коментар и няколко хлопки.

Имате въпроси? Можете да ми изпратите ДМ на Twitter @THEozmic.