I
I
iminby2018-12-29 02:28:35
BEM
iminby, 2018-12-29 02:28:35

BEM - repeating blocks and elements, what about duplicating properties?

I'm still tormented by one single question, the meaning of BAM is clear.
According to the principle, an element cannot be outside the block, the question is, but if I have similar properties, then according to this logic, do I need to duplicate the properties?
That is, I have

block {}
 block__btn {}
 block_text {}

block1 {}
 block1__btn {}
 block1__text {}

what if my properties are the same?
Duplicate everything?
In fact, even such an entry block__btn{}, block1__btn {}
will not work, since block1 may change later.
The very essence of the question is even more, in the html hierarchy, according to the logic of bam, I can’t have such a structure if the elements are the same in properties, but in different blocks.
<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>

Only the answer, please, in Russian words and without a direction to Google, I already read it there.

Answer the question

In order to leave comments, you need to log in

4 answer(s)
O
Oleg, 2018-12-29
@werty1001

I'm still tormented by one single question, the meaning of BAM is clear.
Clearly understood? The point is to avoid duplicates.
if the elements have the same properties, but in different blocks.
Then from these elements you need to make a block, it will be something like this:
<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>

D
Dmitry, 2018-12-29
@LazyTalent

In fact, even such an entry block__btn{}, block1__btn {}
will not work, since block1 may change later.

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

S
skuvaWeb, 2018-12-29
@skuvaWeb

If I understand you correctly, then the parent needs to add a modifier, and already change some properties in it.

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

M
Marat Garifullin, 2018-12-29
@magarif

In this case, you need to use modifiers
https://en.bem.info/methodology/block-modification/

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question