Статья подготовлена для студентов курса «Разработчик JavaScript» в образовательном проекте OTUS. Вёрстка, да и просто сам CSS, являются отдельным пунктом нелюбви разработчиков к фронтенду. Поддержка CSS в больших проектах может превратиться в хождение по минному полю, даже если применяются современные библиотеки/фреймворки, поддерживающие компонентный подход. Если же вы будете придерживаться методологий вёрстки, то сможете облегчить поддержку большого проекта и локализовать изменения при решении задач...

Какую задачу решает БЭМ нейминг Если давать имена CSS классам не задумываясь, то вскоре можно обнаружить в проекте такие имена как text-1, text-2 и text-3. Или например button-1, button-2 и так далее. Чем больше растет проект и чем чаще в проекте встречаются похожие, но с небольшими различиями элементы, тем сложнее придумать им название так чтобы в названиях CSS классов можно было легко ориентироваться. БЭМ нейминг решает эту задачу. Сразу отмечу что методология это рекомендации к тому как придумывать CSS имена...

БЭМ блок - это компонент, который можно перенести в любое другое место на сайта и он не потеряет свою актуальность. Например карточка товара. На скриншоте выше Вы можете видеть 3 карточки товара - 3 БЭМ блока. Многие начинающие не хотят создавать кучу scss файлов и поэтому делают БЭМ блоком внешний контейнер в котором заголовок "Хиты продаж" и 3 карточки товара делают элементами. По хорошему нужно каждую карточку товара сделать БЭМ блоком, а внешние обертки - это уже другой блок. Заголовок стараться делать h1 - h6...