Соглашение об именах BEM: лучшие практики для организованных классов CSS

«Соглашение об именах BEM» означает соглашение об именах «Блок-Элемент-Модификатор». Это популярное соглашение об именах, используемое в веб-разработке для создания последовательной и организованной структуры классов CSS. Методология БЭМ помогает улучшить читаемость кода, удобство сопровождения и сотрудничество между разработчиками.

Вот некоторые методы и рекомендации, которые обычно используются в соглашении об именах BEM:

  1. Блок. Блок представляет собой автономный компонент или повторно используемый элемент на веб-странице. Оно должно иметь осмысленное и описательное имя, позволяющее определить его назначение. Например, панель навигации может называться navbar.

  2. Элемент: элемент представляет собой часть блока и всегда привязан к своему родительскому блоку. Он обозначается двумя символами подчеркивания (__), за которыми следует имя элемента. Например, элемент списка внутри блока navbarможет называться navbar__item.

  3. Модификатор: Модификатор используется для изменения стиля, внешнего вида или поведения блока или элемента. Он обозначается двумя дефисами (--), за которыми следует имя модификатора. Например, модификатор выбранного состояния для navbar__itemможет называться navbar__item--selected.

  4. Вложенность: элементы можно вкладывать в блоки для представления более сложных структур. Например, раскрывающееся меню внутри блока navbarможет называться navbar__dropdown.

  5. Соглашения об именах. Для имен блоков и элементов рекомендуется использовать строчные буквы и слова, разделенные дефисом. В качестве модификаторов можно использовать верблюжий регистр или слова, разделенные дефисом. Например, navbar, navbar__item, navbar__item--selected.

Следуя соглашению об именах BEM, вы можете создать согласованную и самодокументируемую структуру классов CSS, которую легче понять и поддерживать.