Как пользоваться миксинами (**модификаторами** — не то написал в задумчивости) БЭМ?

Question

[Андрей Прозоров]

Если назначить модификатор блоку то для модификации элемента получается каскад. Если назначить модификатор каждому элементу получается куча дополнительных классов что наверное можно назвать избыточностью. Как правильно?

HTML:

<div class="button button_red"  lang="html">
        <i class="button__i"/>
        <span class="button__txt">Lorem</span>
    </div>

CSS:

.button{
     ......
}

.button__i{
     ......
}

.button__txt{
     ......
}
/* как видно ниже модификатор блока порождает каскад */
.button_red  .button__i{
    color: red;
}

.button_red  .button__txt{
    color: red;
}

Пример упрощенный. В жизни может быть гораздо больше элементов

Answer 1

[Vasyl Kovbassa]

SCSS mixin

/// Block Element
/// @access public
/// @param {String} $element - Element's name
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

/// Block Modifier
/// @access public
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}

использование

.block {
    /* CSS declarations for `.block` */

    @include element('element') {
        /* CSS declarations for `.block__element` */
    }

    @include modifier('modifier') {
        /* CSS declarations for `.block--modifier` */

        @include element('element') {
            /* CSS declarations for `.block--modifier__element` */
        }
    }
}

Comments

[Андрей Прозоров]

то-есть по сути предлагаете вариант номер два, каждому элементу дополнительно вводить еще класс с модификатором (".блок__элемент .блок--модификатор__элемент"). Верно понял идею?

[Vasyl Kovbassa]

нет, без каскадов. плоскаю структура.
есть:
.block
.block__element
.block--modifier
.block--modifier__element

[Vasyl Kovbassa]

в случае с .block--modifier__element - нужно понимать когда нужна такая конструкция, а когда нужен каскад. (! Бем не запрещает каскад!).
Простой пример, если у тебя есть блок .group который группирует кнопки и округляет края группы. Есть смысл применить каскад и задать радиус для левого бордера первого ребенка и правого бордера последнего ребенка.

[Андрей Прозоров]

Андрей Прозоров @i_d_1
Я это и и мел ввиду в своем комментарии.
Я использую bemto. (JADE). Он тиак делать не умеет:

+e.el.--modif:
<div class="block__el block__el--modif"></div>

чтобы получилась такая структура как у вас придеться написать вот так:
+el(class="block_el block--modif__el"):
<div class="block_el block--modif__el"></div>

что на мой взгляд грустно

[Vasyl Kovbassa]

ну на практике такое встречается не часто, если ты правильно понимаешь суть бем подхода.
.block и .block_mod - задать вид блока, от бордера внутрь.
block__elem - задает место elem в блоке block (сверху, снизу, посередине итд)
отсюда вопрос: должно ли зависеть позиционирования детей(elem block__elem), от, скажем бэкграунда его родителя(block block_blue)?

[Андрей Прозоров]

Vasyl Kovbassa: Я скорее всего не верно понимаю БЭМ. по этому и спрашиваю. в мануалах я не нашел отетов. Ну вот в моем примере я крашу кнопку в красный. мне нужно перекрасить икноку в белый или она станет например не видна.

[Андрей Прозоров]

Vasyl Kovbassa: Если делать модификаторы отдельно то мне нужно .btn--red задать и .btn_i--white
тоесть два разных модификатора. Это оооочень грустно. нас только что лучше тогда БЭМ вообще не пользоваться

[Андрей Прозоров]

Vasyl Kovbassa: Случай из жизни. Есть Блок кнопка с икнокой. Есть Блок форма 1, есть блок форма 2 (форма сделана по другому принципу). в одной форме кнопка красная с белой иконкой в другой кнопка серая с черной иконкой.

Я добавляю модификатор кнопке, в зависимости от формы. Кнопка реализована JADE миксином.
Самый простой вариант создавать каскад и модификатор > элемент переопределять цвет иконки. но это не соотвествует духу БЭМ.
ОООЧЕнь прошу ответье пожалуйста=)) или я БЭМ никогда не вкурю

[Андрей Прозоров]

Vasyl Kovbassa: Если лепить отдельный модификатор иконке то это дополнительное поле нудно создавать в миксин, проверять его, вставлять в элемент иконки. на голом html+css без всяких БЭМ заморочек выходит меньше. Прогресс ради прогресса получается...

[Vasyl Kovbassa]

вот набросал, немного через одно место, но суть должен понять codepen.io/kovbassa/pen/MJveyr

[Vasyl Kovbassa]

Суть:
у тебя есть блок батон, он имеет свои стили и модификации. Также есть блок иконка, вполне самодостаточный бок (вспоминай теорию - если сущность можно использовать в разных местах страницы ...) иконка также имеет свои стили и модификации. Если же у тебя иконка такого цвета не имеет смысла без определенного цвета родительского блока (батон), то смело применяй каскад.

[Vasyl Kovbassa]

А то, что бем не запрещает запись вида block__el--modif вовсе не значит, что так нужно делать. Поэтому и товарищ Kizu будучи опытным бэтменом :) этого не предусмотрел в bemto.

[Андрей Прозоров]

Vasyl Kovbassa: Все понял, разобрался=) Благодарю!

Answer 2

[Олег]

Каскад от модификатора на элементы нормальная практика, БЭМ не призывает отказываться от каскада совсем, а просто советует его избегать при возможности, а самое главное думать головой.

Comments

[Андрей Прозоров]

Понял. Я так и делаю. Хотел убедиться правильно ли это