Answer the question
In order to leave comments, you need to log in
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>
<h1 class="slogan slogan_text_upper">Мы разрабатываем вещи</h1>
Answer the question
In order to leave comments, you need to log in
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>
<div class="logo">
<a href="/" class="logo__link">Веб<span class="text-accent">Студия</span></a>
</div>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question