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

Question

[Никита Стечкин]

<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>

И вообще, можно ли использовать второй вариант?

Answer 1

[NaN]

Можно оставить как в первом варианте.
Просто стили будут определяться так:

// Если есть общие
.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>

Но я все таки остановилась бы на варианте с каскадом в стилях.

Comments

[Никита Стечкин]

А второй вариант применяют на практике или его нельзя использовать?

[NaN]

ну второй вариант напоминает больше смесь классов как в бутстрапе пишут и БЭМ, вообще бывает, что используют. Но не вижу смысла в этом случае так делать, блок простой сам по себе. Есть блок - .c-card, есть элементы c-card__header, .c-card__footer, .c-card__title, ну и если очень надо и без этого не обойти у заголовка может быть модификатор. Все чисто и понятно

[Никита Стечкин]

NaN, спасибо за помощь

Answer 2

[Realetive]

На абстрактных примерах без дизайна — тут только гадать, но в реальном проекте балансом между здравым смыслом и реиспользованием будет 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 в этом случае сгруппируют общие свойства, а в модификаторах опишутся различия.

Comments

[Никита Стечкин]

А второй вариант применяется на практике или так нельзя делать?

[Realetive]

Никита Стечкин, можно, но по поводу применения — вряд ли, т. к. он менее эффективен с точки зрения БЭМ.

[Realetive]

Никита Стечкин, второй вариант — это же

<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>

?

[Никита Стечкин]

Realetive, Да, это он. Я использую препроцессор, и если мне нужно,чтобы что-то переиспользовалось, то создаю миксин, в таком случае 2 вариант более менее допустим?

[Realetive]

Никита Стечкин, то, как вы это делаете, не имеет значения. И это не даёт «оправдания» в пользу того или иного решения — использование БЭМ «на 50%» или «адаптация под себя» не имеет никакого смысла — ни одна из таких попыток не имела успеха. Советую посмотреть https://youtu.be/d4dcGj8abv0 чтобы понять, в чём смысл БЭМ-именования.

[Никита Стечкин]

Realetive, Хорошо, а если будет тройная вложенность, то так делать нельзя

<ul class="c-card__checklist">
            <li class="c-card__checklist__item">
                <input id="option_1" type="checkbox" name="checkbox" class="c-card__checklist__input">
                <label for="option_1" class="c-card__checklist__label">Apples</label>
            </li>
            <li class="c-card__checklist__item">
                <input id="option_2" type="checkbox" name="checkbox" class="c-card__checklist__input">
                <label for="option_2" class="c-card__checklist__label">Pears</label>
            </li>
        </ul>

И можно будет сделать так, т.е. использовать подход 2 варианта?

<ul class="l-list">

            <li class="l-list__item">
                <div class="c-checkbox">
                    <input id="option_1" type="checkbox" name="checkbox" class="c-checkbox__input">
                    <label for="option_1" class="c-checkbox__label">Apples</label>
                </div>

            </li>
            <li class="l-list__item">

                <div class="c-checkbox">
                    <input id="option_2" type="checkbox" name="checkbox" class="c-checkbox__input">
                    <label for="option_2" class="c-checkbox__label">Pears</label>
                </div>

            </li>
        </ul>

[Realetive]

Никита Стечкин, c-card__checklist__item — так точно делать нельзя, потому что не бывает «элемента у элемента». В этом примере 2 вариант лучше, хотя бы потому, что не противоречит БЭМ.

[Никита Стечкин]

Realetive, понял, спасибо