Соглашение по именованию CSS-селекторов

Для работы с БЭМ-сущностями необходимо ознакомиться с правилами их именования.

Основная идея соглашения по именованию — сделать имена CSS-селекторов максимально информативными и понятными. Это поможет упростить разработку и отладку кода, а также решить некоторые проблемы веб-разработчиков.

В качестве примера рассмотрим CSS-селектор menuitemvisible. Быстрый просмотр такой записи не дает возможности определить типы БЭМ-сущностей по имени.

Добавим разделитель или каждое слово внутри фразы напишем с заглавной буквы (классический стиль CamelCase):

• menu-item-visible;
• menuItemVisible.

В таком виде имя селектора явно разделяется на логические части.

Можем предположить, что:

• menu — блок,
• item — элемент,
• visible — модификатор.

В реальной жизни часто возникают более сложные и не столь однозначные случаи, решить которые помогает соглашение по именованию CSS-селекторов в БЭМ.

Существует также ряд альтернативных схем именования, основанных на принципах БЭМ.