Answer the question
In order to leave comments, you need to log in
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 {}
<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>
Answer the question
In order to leave comments, you need to log in
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>
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%
}
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>
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 questionAsk a Question
731 491 924 answers to any question