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

Question

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

Только ответ пожалуйста русскими словами и без направления в гугл, там я уже и так прочитал.

Comments

[Stalker_RED]

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

Вот это можете простыми словами описать? Совсем непонятно о чем вы.

А в html коде у вас вероятно ошибка, там где .block__text внутри .block1.

[alex]

если что то где-то дублируется, возможно нужно вынести это в отдельный блок

Answer 1

[Олег]

Меня всё мучает один единственный вопрос, смысл бэма понятен.

Точно понятен? Смысл как раз избегать дублей.

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

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

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

Comments

[iminby]

ну тут уже понятнее, что стоит тогда использовать блок в блоке...получается.
А миксы тогда?Больше к модификаторам относится?

[Олег]

iminby, Да, блок в блоке, а что смущает? Весь сайт по сути это блоки в блоках. Я не очень понял вопрос, миксы это одно, модификаторы другое, вам стоит еще почитать, лучше разобраться. Вот может поможет.

Answer 2

[Дмитрий]

По сути, даже подобная запись block__btn{}, block1__btn {}
Не подойдет, так как потом может измениться block1.

block_btn, block1_btn {
color: red;
width: 100%;
}
block1_btn {
width: 80%
}

Answer 3

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

Comments

[iminby]

нет, я имею в виду, если у блоков, элементы с одинаковыми свойствами

например block__btn и block1__btn будут иметь одни и те же свойства, получается нужно будет в css файле продублировать свойства

[Stalker_RED]

iminby, зачем?

Answer 4

[Марат Гарифуллин]

В таком случае нужно использовать модификаторы
https://ru.bem.info/methodology/block-modification/

Comments

[iminby]

так а если элементы одинаковые

[Марат Гарифуллин]

А если одинаковые, зачем иначе называть?)