@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>


Только ответ пожалуйста русскими словами и без направления в гугл, там я уже и так прочитал.
  • Вопрос задан
  • 1418 просмотров
Пригласить эксперта
Ответы на вопрос 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
Data Engineer, Freelancer
По сути, даже подобная запись 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/
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы