@iminby

БЭМ — повторяющиеся блоки и элементы, что на счет дублирования свойств?

Меня всё мучает один единственный вопрос, смысл бэма понятен.
По принципу элемент не может быть вне блока, вопрос такой, а если схожие свойства у меня, то по данной логике, нужно дублировать свойства?
То есть, есть у меня
block {}
 block__btn {}
 block_text {}

block1 {}
 block1__btn {}
 block1__text {}


что если у меня свойства будут одинаковый?
Дублировать всё?
По сути, даже подобная запись block__btn{}, block1__btn {}
Не подойдет, так как потом может измениться block1.

Сама суть вопроса в том даже больше, в иерархии html, по логике бэм я же не смогу иметь такую структуру если элементы по свойствам одинаковые, но в разных блоках.

<div class="block">
 <div class="block__btn"></div>
 <div class="block__text"></div>
</div>

<div class="block1">
 <div class="block1__btn"></div>
 <div class="block__text"></div>
</div>


Только ответ пожалуйста русскими словами и без направления в гугл, там я уже и так прочитал.
  • Вопрос задан
  • 160 просмотров
Пригласить эксперта
Ответы на вопрос 4
werty1001
@werty1001
undefined
Меня всё мучает один единственный вопрос, смысл бэма понятен.
Точно понятен? Смысл как раз избегать дублей.

если элементы по свойствам одинаковые, но в разных блоках.
То из этих элементов нужно сделать блок, будет примерно так:

<div class="block">
 <div class="btn block__btn"></div>
 <div class="text block__text"></div>
</div>

<div class="block1">
 <div class="btn block1__btn"></div>
 <div class="text block1__text"></div>
</div>
Ответ написан
LazyTalent
@LazyTalent
basic
По сути, даже подобная запись block__btn{}, block1__btn {}
Не подойдет, так как потом может измениться block1.

block_btn, block1_btn {
color: red;
width: 100%;
}
block1_btn {
width: 80%
}
Ответ написан
@skuvaWeb
Если я верно вас понял, то родителю нужно добавить модификатор, и в нем уже изменить какие-то свойства.
<div class="block">
 <div class="block__btn"></div>
 <div class="block__text"></div>
</div>

<div class="block block--notDefaultBtn">
 <div class="block__btn"></div>
 <div class="block__text"></div>
</div>
Ответ написан
@magarif
Программист
В таком случае нужно использовать модификаторы
https://ru.bem.info/methodology/block-modification/
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
от 90 000 до 220 000 руб.
11Palms Омск
от 50 000 до 140 000 руб.
LAVAL Санкт-Петербург
от 90 000 руб.
18 марта 2019, в 18:27
150000 руб./за проект
14 марта 2019, в 12:47
800 руб./в час
18 марта 2019, в 17:18
10000 руб./за проект