M
M
Maxim2019-06-17 08:14:51
css
Maxim, 2019-06-17 08:14:51

How do you use repeating text elements in BEM?

Let's say there is a site that has a bunch of different blocks / sections and all of them have the same titles, subtitles, text blocks, links, and so on. These elements sometimes differ only in font size or color.
For now, I’m making my own &__title, &__text, &__link for each block / section, and if I need variations in terms of styles, then I add modifiers to them.
But all this violates the DRY principle, since you have to repeat the same code. In this case, I began to use scss placeholders (but I'm thinking of abandoning them and switching to mixins, for now it's a moot point).
Am I doing everything right? There was also an idea to simply make each such text element an independent block/component and insert it into different blocks/sections, but it seems to be not canon.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergey delphinpro, 2019-06-17
@webmaxer

<div class="block1">
    <div class="block1__title title">Title</div>
</div>
<div class="block2">
    <div class="block2__title title">Title</div>
</div>
<div class="block3">
    <div class="block3__title title title_size_large">Title</div>
</div>
<div class="block3 block3_theme_dark">
    <div class="block3__title block3__title_inverse title">Title</div>
</div>

A
Andrew, 2019-06-17
@KickeRockK

identical titles, subtitles, text blocks, links and so on

Um, what else can text elements differ in?
Make a mixin with default, most common attributes and use

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question