R
R
Rooly2016-12-20 14:09:16
Web development
Rooly, 2016-12-20 14:09:16

Question about BEM mixes?

Greetings. I can't figure out a way to combine different bam entities on the same DOM node. Many times re-reading the documentation, I did not understand how to do it and why it is needed.
There is code in the documentation:

<!-- Блок `header` -->
<div class="header">
    <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
    <div class="search-form header__search-form"></div>
</div>

Why not just add a modifier to the search_form block to change styles? Why create an element?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergey delphinpro, 2016-12-20
@ZetIndex_Ram

The block is universal and independent (ideally). It can be placed anywhere on the site without compromising its own appearance. Therefore, the blocks are not given styles that affect positioning.
An element is an integral part of a block that does not exist outside of it. Therefore, the element can be positioned within its block.
Mix solves the block positioning problem. In this case, we need to set the location of the search block. But we cannot set width, left, etc. to the block. Therefore, we make the same block an element of another (external) block and position it as an element.
Why not a modifier? because
Позиционирование не относится ни к одному из этих вариантов.
Обо всем этом написано https://ru.bem.info/methodology/css/ в разделах "Модификаторы" и "Внешняя геометрия и позиционирование"
UPD
Пожалуй стоит дополнить, что все вышенаписанное, как должно быть понятно, относится именно к позиционированию. Если вы миксуете какие-то стили, которые "задают блокам внешний вид, состояние и поведение", то тут вполне возможно использование модификатора.

E
Eugene, 2016-12-20
@AppFA

Most likely search-form is a more versatile block - which is used in a lot of places, so it makes no sense to create a bunch of modifiers for it. In this case, search-form is used in the "context" of the header, so in this case it's logical to make a mix to add some styles that are needed only for the form in the header. But if your search-form is used in 1-2 places, then it might make sense to just add a modifier for this block. But think ahead a little, maybe it will be needed somewhere later.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question