U
U
Uncle Zhenya2017-03-20 23:03:04
css
Uncle Zhenya, 2017-03-20 23:03:04

How to name BEM modifiers?

Just started to master BEM naming in layout. There is a block with a link logo, in it one word is white, the other is orange. Other elements also have words that need to be highlighted in the same orange color, as well as a lot of headings in the uppercase. Actually the question is: what is the correct name of the modifier? Separated by a space: block-name_element-name modifier or block-name__element-name_modifier ?
In this case, accent should highlight the word in orange. Am I naming the span correctly inside the link?

<div class="logo">
                        <a href="/" class="logo__link">Веб<span class="logo__link text_accent">Студия</span></a>
                    </div>

In the case below, the text is made uppercase. If I apply the style text-transform: uppercase; to the slogan_text-up modifier and want to apply it to another element, not .slogan, then in this other element you still have to specify the slogan_text_upper style. It turns out that you don’t need to add the name of the block to the modifier through "_" but write the modifier through a space?
<h1 class="slogan slogan_text_upper">Мы разрабатываем вещи</h1>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey delphinpro, 2017-03-20
@evgn_tarasevich

The modifier must not be used in isolation from its block. The .text_accent modifier implies that the .text block is being modified.
logo either way

<div class="logo">
    <a href="/" class="logo__link">Веб<span class="logo__accent">Студия</span></a>
</div>

either way
<div class="logo">
    <a href="/" class="logo__link">Веб<span class="text-accent">Студия</span></a>
</div>

Dj in the second case, you can use the text-accent block anywhere.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question