Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>17 авг 2022</li>

3 <li>0</li>

4 </ul><h2>Методология БЭМ: что это такое и как она упрощает жизнь разработчикам</h2>

5 Как БЭМ делает проект понятным и ускоряет процесс разработки и что думают об этой методологии сами разработчики.

6 Иллюстрация: Оля Ежак для Skillbox Media

7 По первому образованию программист, по второму - бухгалтер, а работает корректором и редактором. Потому что любит делать тексты красивыми. А ещё - узнавать новое и делиться этим с читателями.

8 Ещё Христофор Бонифатьевич во всем известном мультике говорил, что главное - правильное название. В "Яндексе", видимо, тоже знают об этом. Ещё в 2005 году там начали разрабатывать методологию БЭМ, в которой важная роль отведена правильному именованию. Разбираемся, что это такое, так ли полезно и используется ли сейчас.

9 Методология БЭМ - это список правил для фронтенд-проектов. Основные сущности, которыми оперирует БЭМ, - блок, элемент и модификатор.

10 Блок - это абсолютно независимый компонент страницы. Он отвечает только за отображение элементов - то есть, например, у него не может быть внешних отступов margin. Блоки могут включать в себя другие блоки. Имя блока совпадает с именем селектора по классу:

11 Элемент - это часть блока, которая имеет смысл только внутри своего блока и отдельно от него не используется. Имя селектора включает имя класса и - через двойное подчёркивание - имя элемента.

12 Модификатор - это сущность, которая описывает атрибуты блока или элемента: положение, состояние, поведение. Для разделения слов в именах всех сущностей используются дефисы. Модификатор в селекторе именуется через одно подчёркивание после имени элемента или блока.

13 Существуют разные вариации подходов к именованию: CamelCase (каждое слово в названии пишется с прописной буквы), Two Dashes (модификаторы отделяются двумя дефисами) и другие.

14 БЭМ не накладывает строгих ограничений на правила именования и фокусируется на том, чтобы названия были понятными, а выбранный подход был един во всех проектах, с которыми работает компания. То есть вы можете выбрать свой стиль и просто следовать ему.

15 Всё началось с селекторов.

16 Селекторы.Сначала разработчики "Яндекса" отказались от селекторов по идентификаторам, а затем и по тегам. Раньше считалось, что селекторы по идентификаторам быстрее, но потом браузеры стали кэшировать и селекторы по классам - так разница в скорости перестала быть значимой.

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

18 Абсолютно независимый блок.Со временем разработчики ввели понятие "абсолютно независимый блок" и таким образом фактически реализовали компонентный подход. Независимые блоки удобны для работы в команде, их можно объединять в библиотеки и переиспользовать от проекта к проекту.

19 Модификаторы.Чтобы не увеличивать количество блоков при изменении их атрибутов, разработчики из "Яндекса" придумали модификаторы. Это классы и своеобразные "метки, несущие определённое свойство блоку". Например, на рисунке ниже - не три разных блока, а один, но с тремя разными модификаторами - "красный", "жёлтый" и "зелёный" - внутри.

20 Изображение: Skillbox MediaКод вместе с CSS можно посмотреть<a>на Codepen</a>.

21 Если модификатор описывает атрибуты, которым присваивается определённое значение (как на рисунке выше), лучше именовать его с помощью пары "ключ - значение". При этом важно правильно выбрать имя ключа и значения.

22 Можно было бы назвать модификаторы traffic__light_color_red и так далее. Но такой подход хрупок. У светофора цвета вряд ли изменятся, но у других блоков - могут. И тогда придётся менять названия классов. Поэтому в имени модификатора лучше указывать название состояния, а не конкретного атрибута, связанного с этим состоянием. Вот так:

23 <ul><li>trafic__light_action_stop;</li>

24 <li>trafic__light_action_wait;</li>

25 <li>trafic__light_action_go.</li>

26 </ul>Файловая система.Разработчики пробовали разные подходы к распределению файлов по директориям: по технологиям или типам файлов (CSS, HTML, JS, XML); по тому, является ли данный код общим для всех проектов (common) или нужен только для конкретного проекта (service).

27 Но в итоге остановились на структуре, в которой файлы разбиты по блокам. Один блок - одна директория, внутри - всё, что нужно для реализации этого блока: поведение, внешний вид, шаблоны, документация, тесты. Имя директории совпадает с именем блока, и оно же является именем класса. Опциональные, или необязательные, элементы блока выносятся в отдельные директории внутри директории блока.

28 Один из вариантов организации проекта по БЭМ:

29 Структура директорийИзображение: Skillbox MediaИнструменты.В "Яндексе" создали фреймворк i-bem.js, а также собственный сборщик БЭМ-проектов: сначала bem-tools, а после - ENB. Сборщик нужен, чтобы подготовить файлы рабочего проекта к публикации. Например, сборщик может обработать все JS-файлы, удалить лишние пробелы и собрать файлы в один готовый к публикации JS-файл - бандл.

30 Фреймворк, хотя его можно назвать и библиотекой, i-bem.js включает в себя базовый блок i-bem, позволяющий на его основе создавать другие блоки и писать код на JS в терминах блоков, элементов и модификаторов.

31 БЭМ-дерево.Чтобы не тратить время на написание HTML-кода руками, создали БЭМ-дерево. Оно описывает порядок блоков, а шаблонизатор BEMHTML превращает его в HTML. Схематично БЭМ-дерево выглядит как иерархия классов:

32 Скриншот: Skillbox MediaВ понятном для шаблонизатора формате BEMJSON эта иерархия выглядит так:

33 Скриншот: Skillbox MediaТакой код набрать гораздо быстрее, чем HTML. Всю рутинную работу по созданию HTML сделает шаблонизатор.

34 БЭМ начали разрабатывать в 2005 году, и этот подход до сих пор актуален.

35 "Кому нужно, и считает это клёвым - уже юзает, либо просто в курсе этого, кому не нужно - обходит стороной".

36 <a>Комментарий</a>к статье на "Хабре" от 2016 года

37 <ul><li>Понятная структура проекта.Просто взглянув на названия селекторов, можно понять, как устроен проект и за что отвечает тот или иной класс.</li>

38 <li>Одновременная работа над разными компонентами.Правила именования обеспечивают уникальность селекторов, вероятность повториться в именах модификаторов мала. Поэтому разработчики могут работать одновременно и не создавать коллизий.</li>

39 <li>Быстрый онбординг новых сотрудников.Изучение проекта требует меньше времени, потому что компоненты по БЭМ документируют сами себя.</li>

40 <li>Высокая скорость разработки.Понятная структура облегчает рефакторинг, а возможность переиспользования - создание новых проектов.</li>

41 <li>Безопасность при привлечении сторонних сотрудников.Проект строится из независимых блоков, поэтому каждому задействованному разработчику знать подробности всего проекта не нужно. Специалисты могут работать в рамках отдельных компонентов. Это позволяет привлекать сторонних специалистов на большие проекты.</li>

42 <li>Гибкость.Можно применять не всю методологию, а только часть. И даже это может сделать работу над проектом удобнее.</li>

43 </ul>"…БЭМ прошел огромный путь, но вовсе не остановился. И на сегодняшний день не является какой-то отдельностоящей штукой, а отлично взаимодействует со множеством других инструментов, фреймворков, шаблонизаторов, etc.".

44 <a>Владимир Гриненко</a>, руководитель службы интерфейсов экосистемы "Яндекса" (<a>комментарий</a>на "Хабре")

45 Не все разработчики были в восторге от БЭМ. Правда, их недовольство больше похоже на раздражение от того, что приходится изучать нечто новое, или на зависть к тем, кто раньше придумал такой простой и очевидный подход.

46 "Нужно запретить пропаганду БЭМ, ввести штраф за публичную демонстрацию БЭМ, etc.".

47 <a>Комментарий</a>на "Хабре"

48 Однако конструктивные комментарии о недостатках БЭМ найти всё же можно. Вот самые важные пункты критики:

49 1. Использование блоков там, где можно обойтись без них.На небольших проектах код для маленьких компонентов (например, логотипа или единственной кнопки), созданный в соответствии с принципами БЭМ, может выглядеть громоздко.

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

51 "Очевидно единственный, но серьезный недостаток БЭМ, это то, что он убивает саму идею каскадности превращая css в ss.

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

53 <a>Комментарий</a>на "Хабре"

54 3. Необходимость знать БЭМ, чтобы работать с проектом и понимать принятую на проекте схему именования селекторов.Любые технологии требуют изучения, а именование в БЭМ поначалу может казаться избыточным. Но это тот случай, когда "лучше день потерять, потом за пять минут долететь".

55 "Сам долго плевался от синтаксиса и этих двойных подчеркиваний и всего такого, но в итоге сдался, потому что это чертовски удобно, вариантов используемого синтаксиса не так уж много (не любитель camelCase в CSS, поэтому остановился на BEM с синтаксисом<a>Гарри Робертса</a>, по примеру<a>Гугла</a>и <a>Salesforce</a>), а преимущества на дистанции - очень солидные".

56 <a>Комментарий</a>на "Хабре"

57 4. Расплывчатость понятия "по БЭМ".Обратная сторона гибкости БЭМ - сложно быстро объяснить, какие именно правила из методологии вы используете.

58 Слайд<a>презентации</a>"БЭМ в дикой природе"Скриншот:<a>wsd.events</a>Несмотря на недостатки и недовольство некоторых разработчиков, подход, заложенный в БЭМ, используют по всему миру.

59 "Да ладно, БЭМ однозначно взлетел, причем не только в России, но и в мире - а это редко кому удается".

60 <a>Комментарий</a>на "Хабре"

61 Гари Робертс<a>называет</a>себя фанатом БЭМ и использует свой, расширенный синтаксис именования классов. Разработчики из Google в своём гитхабе<a>объясняют</a>, как они понимают БЭМ.

62 "Говоря о популярности БЭМ и о том, что мы сами используем его в mdl, надо всё-таки разделять подход к наименованию классов, который и правда хорош и распространен (с небольшими кастомизациями как у нас в Google), и инструменты типа bem-tools, которые, мягко говоря, медлительны. И никто в Google никогда не будет их использовать".

63 <a>Комментарий</a>на "Хабре"

64 Знание БЭМ сегодня пригодится и верстальщикам и разработчикам. На HeadHunter больше ста пятидесяти вакансий с упоминанием БЭМ в требованиях.

65 Пример вакансии с HeadHunterСкриншот:<a>hh.ru</a>Пример вакансии с HeadHunterСкриншот:<a>hh.ru</a><a>БЭМ-библиотеки</a>с универсальными компонентами (блоками) выложены в открытый доступ. Для их подключения не нужны специальные инструменты или шаблонизаторы. Файлы библиотеки можно добавить в HTML-код страницы с помощью обычных link и script.

66 Сегодня никто не ставит себе задачи строжайше следовать БЭМ. Можно сказать, что методология БЭМ разделилась на две части: инструменты разработки и подход к именованию классов. Последний проверен временем и используется не только в России. Так что принципы, заложенные в БЭМ, определённо заслуживают изучения.

67 <a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>