«Соглашение об именах BEM» означает соглашение об именах «Блок-Элемент-Модификатор». Это популярное соглашение об именах, используемое в веб-разработке для создания последовательной и организованной структуры классов CSS. Методология БЭМ помогает улучшить читаемость кода, удобство сопровождения и сотрудничество между разработчиками.
Вот некоторые методы и рекомендации, которые обычно используются в соглашении об именах BEM:
-
Блок. Блок представляет собой автономный компонент или повторно используемый элемент на веб-странице. Оно должно иметь осмысленное и описательное имя, позволяющее определить его назначение. Например, панель навигации может называться
navbar. -
Элемент: элемент представляет собой часть блока и всегда привязан к своему родительскому блоку. Он обозначается двумя символами подчеркивания (
__), за которыми следует имя элемента. Например, элемент списка внутри блокаnavbarможет называтьсяnavbar__item. -
Модификатор: Модификатор используется для изменения стиля, внешнего вида или поведения блока или элемента. Он обозначается двумя дефисами (
--), за которыми следует имя модификатора. Например, модификатор выбранного состояния дляnavbar__itemможет называтьсяnavbar__item--selected. -
Вложенность: элементы можно вкладывать в блоки для представления более сложных структур. Например, раскрывающееся меню внутри блока
navbarможет называтьсяnavbar__dropdown. -
Соглашения об именах. Для имен блоков и элементов рекомендуется использовать строчные буквы и слова, разделенные дефисом. В качестве модификаторов можно использовать верблюжий регистр или слова, разделенные дефисом. Например,
navbar,navbar__item,navbar__item--selected.
Следуя соглашению об именах BEM, вы можете создать согласованную и самодокументируемую структуру классов CSS, которую легче понять и поддерживать.