Я начал изучать методологию БЭМ и столкнулся с вопросами. Допустим у нас имеется карточка, в которой есть изображение в верхней части, и две метки и эти две метки отличаются друг от друга. Как с ними быть? Допускается ли такое использование как в коде ниже?
<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. Как было бы наиболее правильно с точки зрения этой методологии?
На всякий случай прилагаю изображение, которое хочу получить:
Кажется разобрался, нужно просто написать уточняющие имена элементов и в этих классах применять особые свойства принадлежащие именно этому блоку.
<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 остается нетронутым :) Поправьте меня, если я не прав. Буду признателен.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
На канвасе рисуется линия по точкам, как передвигать уже нарисованные точки?
При добавлении двух блоков с анимацией они анимируются одновременно, а надо, чтобы сначала раскрылся один, затем по завершении второй
Нужно чтобы скролл прокручивался к самому низу страницы вместе с анимацией
Есть, скажем, таблица Attachments со столбцами: id | ownerId | ownerType, которые, соответственно: первичный ключ, внешний ключ и таблица, к которой относится...