Бэм и Препроцессоры?

Question

[Alibek Kulseitov]

Допустим ли такой формат ?

А именно "&_bank &-img ?

Или правильнее будет:

&__payment_bank &__payment-img {
	background: url('../img/general/bank_creditCard.svg') no-repeat;
	width: 18px;
	height: 16px;
}

<a href="#" class="checkout__payment checkout__payment_bank">
	<div class="checkout__payment-img"></div>
	<span>PAY WITH <br>bank card</span>
</a>
<a href="#" class="checkout__payment checkout__payment_paypal">
	<div class="checkout__payment-img"></div>
	<span>PAY WITH <br>paypal</span>
</a>

.checkout {
    background-color: rgba(255, 255, 255, 0.988);
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
    padding: 4rem 1.5rem;

    &__payment {
        text-align: center;
        width: 100px;
        border: 1px solid #1e88e5;
        border-radius: 3px;
        padding: .6rem 0;
        line-height: 1;

        &_bank &-img {
            background: url('../img/general/bank_creditCard.svg') no-repeat;
            width: 18px;
            height: 16px;
        }

        &_paypal &-img {
            background: url('../img/general/bank_paypal.svg') no-repeat;
            width: 18px;
            height: 16px;
        }

        ... и тд
    }

}

Comments

[Сергей delphinpro]

Можно сделать так:

.checkout {
    $this: &;
    &__payment {
        &_bank #{$this}__payment-img {        }
        &_paypal #{$this}__payment-img {        }
    }
}

Можно сделать немного по-другому:

.checkout {
    &__payment {
        $__payment: &;
        &_bank #{$__payment}-img {        }
        &_paypal #{$__payment}-img {        }
    }
}

А можно так, особенно если стилизовать нужно несколько элементов:

.checkout {
    $this: &;

    &__payment { 

    }
    
    //==
    //== Payment by bank
    //== ========================
    
    &__payment_bank {
        #{$this} {
            &__payment-img { }
            &__other-el { }
            &__third-el { }
        }
    }
    
    //==
    //== Payment by paypal
    //== ========================
    
    &__payment_paypal {
        #{$this} {
            &__payment-img { }
            &__other-el { }
            &__third-el { }
        }
    }
}

[Сергей delphinpro]

UPD

Второй мой вариант в корне неправильный.
Смотрим селектор checkout__payment-img.
Здесь payment-img — это имя элемента. Имя неразделимо. Будь то имя блока, элемента или модификатора.
Можно разделить блок и элемент

.block {
  &__el {}
}

, элемент и модификатор

.block {
  &__el {
    &_mod {}
  }
}

, даже имя и значение модификатора

.block {
  &__el {
    &_mod-name {
      &_mod-value {}
    }
  }
}

, но не имя.

Хорошая рекомендация — не делать большую вложенность (именно в scss, я не говорю сейчас о выходном css). Два, максимум три уровня. Дальше уже сложнее воспринимать код, определять что к чему относится.

[Alibek Kulseitov]

Сергей, Насчет вложенности согласен.
Мне нравится Ваш 3 вариант но какие минусы у этого варианта?

//
// Component: checkout
// --------------------------------------------------

.checkout {
    text-align: center;
    max-width: 800px;

    &__payment {
        text-align: center;
        flex: 0 0 45%;
        max-width: 45%;
        border: 1px solid transparent;
        border-radius: 3px;
        padding: .6rem 0;
        line-height: 1;
        margin-top: 1rem;
        @include transition();

        @include media-breakpoint-up(sm) {
            max-width: none;
            flex: 0 0 120px;
        }


        // bank
        &_bank {
            border-color: #4487c6;

            &:hover {
                background: #4487c6;
            }

            .checkout__payment-img {
                background: url('../img/general/bank_creditCard.svg') no-repeat;
                width: 18px;
                height: 20px;
            }

            &:hover .checkout__payment-img {
                background: url('../img/general/bank_creditCard_white.svg') no-repeat;
                width: 18px;
                height: 20px;
            }

            span {
                color: #4487c6;
            }
        }

        // paypal
        &_paypal {
            border-color: #09348f;

            &:hover {
                background: #09348f;
            }

            .checkout__payment-img {
                background: url('../img/general/bank_paypal.svg') no-repeat;
                width: 18px;
                height: 20px;
            }

            &:hover .checkout__payment-img {
                background: url('../img/general/bank_paypal_white.svg') no-repeat;
                width: 18px;
                height: 20px;
            }

            span {
                color: #09348f;
            }
        }

    }
}

[Сергей delphinpro]

Алибек Кулсеитов, Смотрите, допустим стилей много и у меня на экране помещаются только эти участки кода (недалеко от истины)
------------------------

------------------------

------------------------
Учитывая, что я не сомневаюсь только в том, что правлю файл _checkout.scss, у меня в голове есть только имя блока (.checkout)
Во втором случае мне нужно проскроллить вверх, чтобы выяснить, чей это модификатор — какого-то элемента или непосредственно блока. В первом я чётко вижу элемент и идентификатор. Ну и заметный коммент, поясняющий назначение модификатора =).

[Alibek Kulseitov]

Сергей, Понял Вас)
В общем такой вариант читабельнее и логичнее верно)?
А что конкретно тут выполняет $this?

.checkout {
    $this: &;

    &__payment { 

    }
    
    //==
    //== Payment by bank
    //== ========================
    
    &__payment_bank {
        #{$this} {
            &__payment-img { }
            &__other-el { }
            &__third-el { }
        }
    }
    
    //==
    //== Payment by paypal
    //== ========================
    
    &__payment_paypal {
        #{$this} {
            &__payment-img { }
            &__other-el { }
            &__third-el { }
        }
    }
}

[Сергей delphinpro]

Алибек Кулсеитов, ссылка на имя блока.
$this: & - положит текущий контекст в переменную. Название переменной, конечно не важно. можно и так$checkout: &;, a потом #{$checkout} { ... }. А можно и без неё обходится, пиша непосредственно имя блока во внутренних уровнях (как у вас в примере)

[Сергей delphinpro]

Алибек Кулсеитов,

В общем такой вариант читабельнее и логичнее верно)?

Да, читабельность превыше всего. Код чаще читается, чем пишется.

Answer 1

[Леонид Князев]

В БЭМ нет каких-то правил или рекомендаций как вам оформлять свой код в scss/less/styl и других файлах со стилями, которые обрабатываются препроцессорами.

Answer 2

[Dima Polos]

Первый вариант вернет .checkout_bank .chexkout-img, то есть вложенный селектор, если Вы хотите получить такой селектор .checkout_bank-img (с модификатором), то правильно вот так:
.checkout {
&_bank{
&-img
}
}

Answer 3

[Andrew Ghostuhin]

.checkout {
    background-color: rgba(255, 255, 255, 0.988);
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
    padding: 4rem 1.5rem;

    &Payment {
        text-align: center;
        width: 100px;
        border: 1px solid #1e88e5;
        border-radius: 3px;
        padding: .6rem 0;
        line-height: 1;

        &_bank {
            &-img {
                background: url('../img/general/bank_creditCard.svg') no-repeat;
                width: 18px;
                height: 16px;
            }
        }
        &_paypal {
            &-img {
                background: url('../img/general/bank_paypal.svg') no-repeat;
                width: 18px;
                height: 16px;
            }
        }
    }
}

P.S: не советую ставить svg в качестве бекграунда

Comments

[Alibek Kulseitov]

это иконки для метода оплаты товара )