A
A
Alexander Lysenko2017-05-27 18:46:58
BEM
Alexander Lysenko, 2017-05-27 18:46:58

Does it make sense to reflect the nesting of elements in BEM layout?

When creating a static page layout structure according to BEM, does it make sense to indicate the nesting of elements directly in the layout? Those. Wouldn't it be redundant to form structural classes according to the following principle:
.l-page
    .l-page__header
        .l-page__header-logo
        .l-page__header-menu
Or is it more correct to stick to asceticism and leave each element as an individual unit of a common block?
.l-page
    .l-page__header
        .l-page__logo
        .l-page__menu
In this case, the Footer element in perspective will be identical to the Header element (footer > logo+menu)

Answer the question

In order to leave comments, you need to log in

2 answer(s)
I
i, 2017-05-28
@AlexanderZe

Reflecting the nesting of elements in the class name is a common mistake in understanding the methodology.
It is more correct to adhere to "asceticism", more precisely, this is exactly what the official documentation says.
Prefixes are not used in the methodology (see the history of development), but they do not contradict it either, if they solve your problem, then they have a place.
A block, in addition to elements, can contain blocks and does not know anything about its location and external indents, but knows about its size and its inner world.
The location of the block determines the other block or element (for them, this will be knowledge of their inner world).
All of the above can be expressed in a layout like this:

.page // определяет свой внутренний мир и расположение своих элементов
    .page__header // определяем внутренние отступы
        .logo // ничего не знает о своем положении оно определяется в page__header
        .page__menu
            .menu // вполне самостоятельная переиспользуемая сущность
    .page__footer
        .logo_small // модификация знания про размер
        .menu_small // может иметь различные вариации (модификаторы)

The layout is nothing more than a clear example of brief excerpts from the methodology. Depending on the task, the sense of beauty, etc., the same thing can be realized differently. For example, and
elements can be one element for which modifications are implemented and ... although the possibilities do not end there, it can still be so . This methodology is just principles, like SOLID, not a specification. page__footerpage__headerpage__sectionpage__section_headerpage__section_footerpage__section_type_headerpage__section_type_footer

S
sim3x, 2017-05-27
@sim3x

Here two points are mixed up
. The prefix l- is for classes that control the location of blocks on the layouts page
. It is desirable to indicate in its name where it is located
. But for the block (prefix b-), it is important to indicate its purpose.
Moreover, prefixes should be indicated if the project is migrations to BEM and has styles not in BEM notation

.l-page
    .l-page__header
        .company__logo
        .site__menu

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question