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

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

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

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

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

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

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

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

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

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

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

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

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

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

Успех.