N
N
Norum2021-09-09 17:51:01
css
Norum, 2021-09-09 17:51:01

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>


and inside each is the text itself they all have the same font type font size and font color.
Can I just write a class (mix) called text, which will contain all these styles, and add this mix to each block? That is, and? BUT, if suddenly, suppose the description__text block has a smaller font, then just set the fz_description_text modifier with font-size for this block separately? Did I understand correctly?

.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

3 answer(s)
S
strelok011, 2021-09-09
@strelok011

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.

I
iBird Rose, 2021-09-09
@iiiBird

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 question

Ask a Question

731 491 924 answers to any question