1. 17. 10. Плюсы и минусы БЭМ

Плюсов в БЭМ больше, с них и начнём.

Плюсы

• Простота — низкий порог вхождения в технологию, даже новичок может использовать БЭМ в своём проекте.

• Гибкость — БЭМ-сущности формируются под нужды и специфику проекта. Нет чётких правил, что одни сущности отвечают только за сетки, а другие — только за темы (можно сравнить со SMACSS).

• Независимость — компоненты создаются так, чтобы их можно было легко переносить из проекта в проект без каких-либо доработок.

• Командная разработка интерфейса — монолит макета делится на независимые блоки, которые разрабатываются отдельными участниками команды, возможна параллельная работа, кто-то собирает эти блоки вместе.

• Лучшая производительность — из-за того, что БЭМ не использует вложенные селекторы, браузеры быстрее вычисляют специфичность селекторов и быстрее обрабатывают правило. Правда некоторые источники утверждают, что современные движки браузеров достаточно эффективны, и практически во всех сложных случаях (за исключением разве что самых экстремальных) выигрыш в скорости пренебрежительно мал.

• Понятность (человекочитаемость) — вопрос больших проектов, структура проекта прозрачна, всё что относится к блоку/компоненту собрано внутри одной папки. Простые селекторы помогают быстрее понять ваш код другим разработчикам и вам по прошествии некоторого промежутка времени.

• Меньше конфликтов при определении стилей для элемента — имена классов уникальные и не повторяются. Перебивать вес селекторов не нужно. Как правило, достаточно сделать модификатор (возможно, придётся использовать флаг !important только для внешних библиотек, чтобы перебить правило, которое мы не имеем права переписывать).

• Расширяемость — официальную документацию по БЭМу каждая команда может расширить своими мыслями и опытом набитых шишек. Хотя это уже не совсем БЭМ, а какой-то расширенный вариант БЭМ для вашей команды/компании.

А ещё БЭМ помогает новичкам сформировать компонентное мышление. Это облегчает расширяемость проекта, ведь все компоненты независимы, любой из них легко изменить, и эти изменения не затронут другие компоненты. А значит, меньше шансов что-либо сломать.

Минусы

• Увеличение объёма файлов со стилями (каждый DOM-узел с классом, плюс длинные названия классов и несколько классов для одного узла, возможно, дублирование стилей). Проблему можно решить за счёт минификации итоговых файлов со стилями и добавлением в сборку только нужных файлов.

• «Страшный» HTML-код (в разметке появляется куча классов). В исходный код страницы с разметкой пользователи заглядывают редко. Так что если вы раздумываете, использовать или не использовать БЭМ, то этот пункт вряд ли будет решающим.

• Сложности при реализации. В стилях каждый компонент — это отдельный файл (в CSS есть директива @import), а вот писать компонентно на «ванильном» HTML — это проблема. Пока что, к сожалению, нет подходящих инструментов для сборки. В таком процессе разработки тяжело сделать декомпозицию.