Очень лаконичная статья про БЭМ.

Плохо

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



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



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

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

Хорошо

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



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

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

Успех.

Оригинал статьи