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

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

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

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

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

  • menu-item-visible;
  • menuItemVisible.

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

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

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

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

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

results matching ""

    No results matching ""