На главную

БЭМ в двух картинках

БЭМ в двух картинках

Бывают случаи, когда человек не сразу может понять принципы БЭМ, или, что еще интереснее, понимает их неверно.

Публикация от .

Неверное понимание БЭМ

Был такой твит от Виталия Харисова, который наглядно демонстрирует результат непонимания.

Если случай про вас, посмотрим на рисунок ниже.

Слегка неверное понимание БЭМ
Слегка неверное понимание БЭМ

При слегка неверном понимании БЭМ, код стилей выходит примерно таким:

.block { }
.block__elem1 { }
.block__elem1__elem2 { }
.block__elem1__elem2__elem3 { }

Правильное понимание БЭМ

В разметке вложенность элементов — это норма, но в БЭМ все элементы Блока — это просто элементы, без какой либо зависимости от уровня вложенности относительно друг друга. БЭМ-дерево Элементов в рамках одного блока имеет один уровень вложенности. Смотрим на следующий рисунок.

Понимание Элемента в терминах БЭМ
Понимание Элемента в терминах БЭМ

Теперь код выходит примерно таким:

.block { }
.block__elem1 { }
.block__elem2 { }
.block__elem3 { }

Успех.