Answer the question
In order to leave comments, you need to log in
Is it correct to use mixes in BEM to set the same properties for several elements?
For example, if suddenly there are several elements in the layout with the same font size, color and font type, then I can add one mix to the name of the main element and set certain styles for this mix and then just add it to other elements?
On the shelves: there is a header, presentation and description block, and in each of these blocks there is a block responsible for the text: header_text, presentation_text, description_text.
<div class="header">
<div class="header__text">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</div>
</div>
<div class="presentation">
<div class="presentation__text">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</div>
</div>
<div class=" description">
<div class=" description__text">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</div>
</div>
.text {
font-family: 'Heebo', sans-serif;
font-size: 14px;
color": black;
}
<div class="header">
<div class="header__text text">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</div>
<div class=" description">
<div class=" description__text fz_description_text">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</div>
</div>
.fz_description_text {
font-size: 17px;
}
Answer the question
In order to leave comments, you need to log in
In the scss paradigm, all this nonsense can be implemented by a mix at the scss level, and not at the mix class level. Don't get hung up on ideology.
If the goal is important to you, you don’t need to overload the markup with such garbage classes.
you can create this text as a separate block and insert it into your header, presentation, description, etc. blocks.
conditionally call it page-text. then it will be easier to modify this block:
<div class=" description">
<div class="page-text page-text_small">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</div>
</div>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question