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

Доброго вечера.
Есть большой блок (слайдер), у которого есть несколько типов и разметок. У каждого из типов есть уникальные элементы, и у каждого из типов есть общие элементы. Решил задачу созданием одного общего блока, и двух конкретных блоков, которые затем смиксовал.
Код всего этого дела
<!-- Первый слайдер -->
<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.
- Можно ли красивее? Остается такое чувство, будто наделал костылей. Как реализовали бы схожую задачу вы?

Заранее спасибо.
  • Вопрос задан
  • 775 просмотров
Решения вопроса 3
Realetive
@Realetive
MODX Ambassador России, самозванный БЭМ-евангелист
На самом деле всё проще, достаточно использовать модификаторы:

<!-- Первый слайдер -->
<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>
Ответ написан
Комментировать
alvvi
@alvvi
export default apathy;
- Можно ли присваивать уникальным для каждого конкретного блока элементам только класс этого самого конкретного блока? Как в коде выше, я не присвоил элементу .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 (такое себе, но да)

Минусы
  • Надругательство над ролью модификаторов, по сути они предназначены совсем не для этого
  • В стилях блока появится чейнинг и сами они станут чуть более запутанными
Ответ написан
Комментировать
gzhegow
@gzhegow
aka "ОбнимиБизнесмена"
Бэм очень легко поясняется на аналогии "с котенком".
Спроси двух разных людей о белом котенке - попроси их его вообразить и описать.
Ты увидишь что их слова отличаются, т.к. разное воспитание у людей было.

В Бэме примерно также. У тебя есть два блока - совершенно не важно кто они в иерархии и кто из них старше. Каждый DOM элемент ты можешь называть одним именем для одного блока и другим именем для другого.

Вот пример - есть у тебя страница, на странице есть "футер" а в футере есть "слайдер".
Это два разных "человека", которые могут назвать картинку слайдера своими собственными названиями.

.footer__sliderimage.slider__image
или чтобы еще более наглядно
.footer__kakajatokartinka.slider__kartinkaslaida

Я имел в виду, что сам первый месяц работы с БЭМом искал как правильно. Но не найдя ни одного толкового объяснятеля - все мутили только воду потому что не знали сами, для стандарта такая ситуация недопустима - внезапно обратил внимание на то что написал выше.

Здесь самое главное - не связывать блоки между собой. Я имею в виду что в DOM дереве они конечно родитель и потомок. Но вот это связывание в иерархию потом создает путаницу и невозможность вставить один блок в другой. Отойди от мысли вложенности блоков друг в друга - здесь они все существуют как бы параллельно. Для слайдера - картинка - это "картинка слайда", а для футера это "картинка слайдера" или просто "какая-то картинка". Не связывай их в иерархию больше чем на один уровень (блок-элемент) и не приплетай в понимание БЭМа дерево DOM. В этом и есть секрет. Один элемент DOM дерева может быть:
- элементом а1 для блока 1
- элементом б1 для блока 2
- блоком 3
но вложенность все равно будет один уровень, даже если от блока до элемента несколько DOM-уровней. Блок может быть footer, а картинка слайдера от него еще в двух дивах и трех таблицах по глубине. И тем не менее это все равно один уровень вложенности. Ты просто манипулируешь своей собственной таблицей названий, забивая на чужие иерархии
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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