Как выбирать правильные имена классов в методологии БЭМ?

Каким образом лучше назвать классы .date.logo.title внутри .row-block__item? У меня возникают проблемы с именованием, когда имеет место большая вложенность. Также, мне интересно, как правильно определять позиционирование .block__row внутри .block и применять стили к .row-block.
  • 21 октября 2023 г. 13:20
Ответы на вопрос 1
В методологии БЭМ (Блок-Элемент-Модификатор) имена классов строятся по следующему принципу:

1. Блоки: именуются с использованием простого имени класса, отражающего сущность блока, например, .block.

2. Элементы: именуются с использованием двойного подчеркивания вместо дефиса, указывая на принадлежность к блоку, например, .block__element.

3. Модификаторы: именуются с использованием двоеточия вместо дефиса, указывая на модификацию блока или элемента, например, .block--modifier или .block__element--modifier.

Когда имеется большая вложенность, внутри блока вы можете использовать подходящую нотацию для именования классов. Например, для вашего случая с классами .date.logo.title внутри .row-block__item, вы можете использовать их полное пути в имени класса, разделяя их двойными подчеркиваниями:

.row-block__item__date
.row-block__item__logo
.row-block__item__title

В отношении позиционирования .block__row внутри .block, вы можете использовать различные техники позиционирования в CSS, в зависимости от ваших требований и дизайна страницы. Возможным вариантом является использование правил CSS, связанных с позиционированием элементов, таких как position: relative или position: absolute. Для применения стилей к .row-block, вы можете использовать его селектор в CSS правилах и добавлять необходимые стили. Например:

.block .row-block {
  /* ваши стили здесь */
}
Похожие вопросы