Как правильно назвать вложенный блок в BEM?

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title">Название</h2>
    </div>
</div>


В примере выше показан пример использования BEM из документации, но что, если мне нужно будет использовать "c-card__title" в блоке "c-card" несколько раз? Допустим, добавить "c-card__footer, т.е

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title">Заголовок</h2>
    </div>
    <div class="c-card__foter">
        <h2 class="c-card__title">Заголовок</h2>
    </div>
</div>


В таком случае, чтобы для каждого "c-card__title" задать отдельный стиль лучше будет сделать 1 вариант

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__header-title">
Заголовок</h2>
    </div>
<div class="c-card__footer">
        <h2 class="c-card__footer-title">
Заголовок</h2>
    </div>
</div>


Или 2 вариант

<div class="c-card">
    <div class="c-card-header">
        <h2 class="c-card-header__title">
Заголовок</h2>
    </div>
<div class="c-card-footer">
        <h2 class="c-card-footer__title">
Заголовок</h2>
    </div>
</div>


И вообще, можно ли использовать второй вариант?
  • Вопрос задан
  • 108 просмотров
Решения вопроса 2
KornevaViktoria
@KornevaViktoria
Frontend Developer
Можно оставить как в первом варианте.
Просто стили будут определяться так:
// Если есть общие
.c-card__title {}

// Ну и при каких-либо отличиях
.c-card__header .c-card__title {}
.c-card__footer .c-card__title {}


Либо оставить первый вариант и для .c-card__title добавить модификатор .c-card__title--header или .c-card__title--footer и на него вешать стили.

В итоге будет так:

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title c-card__title--header">Заголовок</h2>
    </div>
    <div class="c-card__footer">
        <h2 class="c-card__title c-card__footer">Заголовок</h2>
    </div>
</div>


Но я все таки остановилась бы на варианте с каскадом в стилях.
Ответ написан
Realetive
@Realetive
MODX Ambassador России, самозванный БЭМ-евангелист
На абстрактных примерах без дизайна — тут только гадать, но в реальном проекте балансом между здравым смыслом и реиспользованием будет 1 вариант:

<div class="card">
  <div class="card__header">
    <h2 class="card__header-title">Заголовок</h2>
  </div>
  <div class="card__footer">
    <h2 class="card__footer-title">Заголовок</h2>
  </div>
</div>


Т. к. он избавляет от необходимости использовать каскад и эффективно использует нейминг для обозначения каждой сущности. Также я убрал префикс c-, т. к. не вижу в нём никакого смысла.

Вариант с c-card-header и c-card-footer смысла особого не имеет, т. к. создаёт ложное впечатление, что эти блоки могут использовться за пределами блока c-card.

Альтернативным правильным решением может быть использованием модификаторов элемента card__header для описания их рзличий в зависимости от расположения:

<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title_position_header">Заголовок</h2>
  </div>
  <div class="card__footer">
    <h2 class="card__title card__title_position_footer">Заголовок</h2>
  </div>
</div>


Стили в card__title в этом случае сгруппируют общие свойства, а в модификаторах опишутся различия.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы