Как правильно сделать с точки зрения БЭМ?

Question

[Алексей Николаев]

Доброго вечера.
Есть большой блок (слайдер), у которого есть несколько типов и разметок. У каждого из типов есть уникальные элементы, и у каждого из типов есть общие элементы. Решил задачу созданием одного общего блока, и двух конкретных блоков, которые затем смиксовал.

Код всего этого дела

<!-- Первый слайдер -->
<div class="slider slider-promo">
    <div class="slider__track slider-promo__track">
        <div class="slider__slide slider-promo__slide"></div>
        <div class="slider__slide slider-promo__slide"></div>
        <div class="slider__slide slider-promo__slide"></div>
    </div>

    <div class="slider__arrows slider-promo__arrows"></div>
</div>

<!-- Второй слайдер -->
<div class="slider slider-grid">

    <!-- Набор уникальных для второго слайдера элементов -->
    <div class="slider-grid__meta">
        <div class="slider-grid__description"></div>
    </div> 

    <div class="slider__track slider-grid__track">
        <div class="slider__slide slider-grid__slide"></div>
        <div class="slider__slide slider-grid__slide"></div>
        <div class="slider__slide slider-grid__slide"></div>
    </div>

    <div class="slider__arrows slider-grid__arrows"></div>
</div>

Вопросы:
- Можно ли присваивать уникальным для каждого конкретного блока элементам только класс этого самого конкретного блока? Как в коде выше, я не присвоил элементу .slider-grid__meta класс .slider__meta.
- Можно ли красивее? Остается такое чувство, будто наделал костылей. Как реализовали бы схожую задачу вы?

Заранее спасибо.

Answer 1

[Realetive]

На самом деле всё проще, достаточно использовать модификаторы:

<!-- Первый слайдер -->
<div class="slider slider_promo">
    <div class="slider__track">
        <div class="slider__slide"></div>
    </div>
    <div class="slider__arrows"></div>
</div>

<!-- Второй слайдер -->
<div class="slider slider_grid">
    <div class="slider__meta">
        <div class="slider__description"></div>
    </div> 
    <div class="slider__track">
        <div class="slider__slide"></div>
    </div>
    <div class="slider__arrows"></div>
</div>

Answer 2

[alvvi]

- Можно ли присваивать уникальным для каждого конкретного блока элементам только класс этого самого конкретного блока? Как в коде выше, я не присвоил элементу .slider-grid__meta класс .slider__meta.

Ну вообще-то предполагается, что составных блоков не будет. Вообще. Иначе они становятся зависимыми друг от друга, а с точки зрения БЭМ, это неправильно.

- Можно ли красивее? Остается такое чувство, будто наделал костылей. Как реализовали бы схожую задачу вы?

Как вариант:

<div class="slider slider--promo">
    <div class="slider__track">
        <div class="slider__slide"></div>
        <div class="slider__slide"></div>
        <div class="slider__slide"></div>
    </div>

    <div class="slider__arrows"></div>
</div>

<!-- Второй слайдер -->
<div class="slider slider--grid">

    <!-- Набор уникальных для второго слайдера элементов -->
    <!-- ВАЖНО: теперь они не уникальны, но в первом случае мы их просто не используем, можно сказать это "опциональные" элементы -->
    <div class="slider__meta">
        <div class="slider__description"></div>
    </div> 

    <div class="slider__track">
        <div class="slider__slide"></div>
        <div class="slider__slide"></div>
        <div class="slider__slide"></div>
    </div>

    <div class="slider__arrows"></div>
</div>

Плюсы

• -2 лишних БЭМ-сущности
  
• Не нарушается принцип независимости сущностей
  
• Меньше классов в HTML (такое себе, но да)
  

Минусы

• Надругательство над ролью модификаторов, по сути они предназначены совсем не для этого
  
• В стилях блока появится чейнинг и сами они станут чуть более запутанными