css – Layout questions – BEM

Question:

Hello.

Questions about BEM layout.

  1. It is written in the documentation that "The block should not affect its environment, i.e. the block should not be given external geometry (in the form of padding, borders that affect dimensions) and positioning." How then to set the same paddings, margins…?

  2. Why do you need a mix? I do not understand. There is a block, there is a modifier. Why else mix? Please provide an understandable example.

Answer:

  1. The idea is that the block can be reused anywhere on the page (or even in another project).

    If it is known that no matter where a given block is required, it will have the same height, width and border, then width , height and border can be safely left. But margin , position and float are very likely to be a bad idea – there is no guarantee that the block will still require the same padding and positioning elsewhere. Of course there are exceptions, the universal rule is to use common sense.

  2. A trick that allows you to use different BEM entities on the same DOM node.

    Mixes allow:

    • Combine the behavior and styles of several entities without code duplication;
    • Create semantically new interface components based on existing ones.

    Mix example:

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

    In this example, we combined the behavior and styles of the search-form block and the search-form search-form element of the header block. This approach allows us to set the outer geometry and positioning in the header__search-form element, while leaving the search-form block itself generic. Thus, the block can be used in any other environment because it does not specify any indentation. This allows us to speak of his independence.

The simplest implementation:

 /* Вообразим что это прекрасный блок формы Он может быть переиспользован в другом месте, но вид у него дефолтно такой */ .search-form{ display: inline-block; cursor: pointer; background: rgba(0,149,255,1); color: #00ff5c; padding: 10px 30px; } /* Вообразим что это прекрасный блок шапки Он знать ничего не знает о других блоках, однако, его элементы должны приводить содержимое в нужную форму */ .header{ color: blue; } /* Элемент формы шапки Он не знает про блок формы, но знает что в шапке у формы должен быть margin от текста ниже формы И плавная смена цвета при наведении */ .header__search-form{ margin-bottom: 10px; transition: all .5s; } .header__search-form:hover{ background: #0e13b5; }
 <!-- Блок `header` --> <div class="header"> <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`--> <div class="search-form header__search-form">Форма</div> <div>Это шапка</div> </div>
Post Views: 7
Scroll to Top