Answer the question
In order to leave comments, you need to log in
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
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 // может иметь различные вариации (модификаторы)
page__footer
page__header
page__section
page__section_header
page__section_footer
page__section_type_header
page__section_type_footer
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 questionAsk a Question
731 491 924 answers to any question