Вопрос по поводу специфичности класса в БЭМ

194
03 сентября 2018, 21:20

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

<div class="cart">
    <div class="cart__top">
        <img class="cart__img" src="img/variant-cart-img.png" alt="">
        <div class="lbl lbl_red cart__lbl_top-right">Скидка</div>
        <div class="lbl lbl_pink cart__lbl_bottom-left">Тип</div>
    </div>
    <div class="cart__bottom">
        <div class="lbl lbl_violet cart__lbl_first-big-letter">Описание</div>
    </div>
</div>

CSS классов:

.lbl {
    font-size: 14px;
    text-transform: lowercase;
    padding: 7px 14px;
    color: white;
}
.lbl_pink {
    background: linear-gradient(135deg, #FFCCD6 0%, #F5627F 100%);
}
.lbl_green {
    background: linear-gradient(135deg, #00FA9A 0%, #33A3CC 100%);
}
.lbl_violet {
    background: linear-gradient(135deg, #33A3CC 0%, #C083D5 100%);
}
.cart {
    display: flex;
    flex-direction: column;
    box-shadow: 3px 3px 0 #ebc3e0;
    overflow: hidden;
}
.cart__top {
    position: relative;
    width: 197px;
    height: 197px;
}
.cart__lbl_top-right {
    position: absolute;
    top: 0;
    right: 0;
    padding: 14px 5px;
}
.cart__lbl_bottom-left {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 10px;
}
.cart__lbl_first-big-letter {
    text-transform: none;
}

Если мы будем писать для обоих меток cart_lbl, то как изменить их вид, писать несколько модификаторов?

<div class="lbl lbl_red cart__lbl lbl_top-right">Скидка</div>
<div class="lbl lbl_red cart__lbl lbl_bottom-left">Тип</div>

Но ведь этот модификатор не имеет никакого отношения к метке. Он относится к нему только потому, что он находится в cart. Тогда придется менять код lbl. Как было бы наиболее правильно с точки зрения этой методологии?

На всякий случай прилагаю изображение, которое хочу получить:

Answer 1

Кажется разобрался, нужно просто написать уточняющие имена элементов и в этих классах применять особые свойства принадлежащие именно этому блоку.

<div class="cart">
    <div class="cart__top">
        <img class="cart__img" src="img/variant-cart-img.png" alt="chanel">
        <div class="cart__sale lbl lbl_view_red">-10%</div>
        <div class="cart__type lbl lbl_view_green">Женские</div>
    </div>
    <div class="cart__bottom">
        <div class="cart__content lbl lbl_view_violet">Духи</div>
    </div>
</div>

И тогда можно писать такие стили:

.cart {
    display: flex;
    flex-direction: column;
    box-shadow: 3px 3px 0 #ebc3e0;
    overflow: hidden;
    cursor: pointer;
}
.cart__top {
    position: relative;
    width: 197px;
    height: 197px;
}
.cart__sale {
    position: absolute;
    top: 0;
    left: 0;
    padding: 14px 5px;
}
.cart__type {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 10px;
}
.cart__content {
    text-transform: none;
}

А блок .lbl остается нетронутым :) Поправьте меня, если я не прав. Буду признателен.

READ ALSO
Как передвигать точки на canvas?

Как передвигать точки на canvas?

На канвасе рисуется линия по точкам, как передвигать уже нарисованные точки?

157
Анимация по очереди, а не одновременно

Анимация по очереди, а не одновременно

При добавлении двух блоков с анимацией они анимируются одновременно, а надо, чтобы сначала раскрылся один, затем по завершении второй

190
Автоматический скролл к низу страницы

Автоматический скролл к низу страницы

Нужно чтобы скролл прокручивался к самому низу страницы вместе с анимацией

185
Полиморфные связи в Entity Framework

Полиморфные связи в Entity Framework

Есть, скажем, таблица Attachments со столбцами: id | ownerId | ownerType, которые, соответственно: первичный ключ, внешний ключ и таблица, к которой относится...

261