Jak prawidłowo ustawić zakres elementu za pomocą BEM?

Question

Biorąc pod uwagę następujące BEM struktura drzewa, gdzie istnieje pięć zagnieżdżone poziomy:

collection-main__features-top__story__byline__author 

według Bema konwencji nazewnictwa, gdzie element jest częścią bloku i nie ma znaczenia poza blokiem należy, co jest właściwy sposób na nazwę klasy author?

Ponieważ w author jest semantycznie związane z byline i kontekstu story, ale bez znaczenia pod features-top i collection-main bloków, jaka jest najlepsza nazwa BEM?

collection-main__author 
features-top__author 
story__author (best?) 
story__byline__author 
byline__author 

Co się stanie, jeżeli nowy blok zostanie wprowadzony features?

collection-main__features-top__story__byline__author (target) 
collection-main__features-bottom__story__byline__author 

features-top__story__author 
story--features-top__author (best?) 

Wreszcie, co się stanie, jeśli inny collection blok zostanie dodana i chcemy projektować drugi element autor w liście?

collection-main__features-top__story__byline__author 
collection-main__features-bottom__story__byline__author (target) 
collection-sub__features-top__story__byline__author 
collection-sub__features-bottom__story__byline__author 

Czy zrobilibyśmy coś takiego?

story--collection-main--features-bottom__author 

Musi być lepsza opcja.

Answer 1

BEM zabrania umieszczania elementów w elementach w CSS! Dokonujesz najbardziej typowego błędu w znacznikach BEM - piszesz block__element__element. Musisz utworzyć nowe bloki, zamiast kopiować drzewo DOM.

Na przykład:
Right HTML:

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
    <div class='block__elem3'></div> 
</div> 

Prawy CSS:

.block {} 
.block__elem1 {} 
.block__elem2 {} 
.block__elem3 {} 

Jeśli trzeba wykonać element elementu, to trzeba zrobić nowy blok lub utwórz swoje drzewo bem z pojedynczymi elementami zagnieżdżonymi!

ŹLE:

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem1__elem2'></div> 
    </div> 
</div> 

prawo # 1: Sprawdź nowy blok

<div class='block1'> 
    <div class='block2'> 
     <div class='block2__elem'></div> 
    </div> 
</div> 

prawo # 2: Dokonaj BEM-drzewa z pojedynczych elementów zagnieżdżonych

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
</div> 

Zwróć uwagę - nie możesz umieścić elementów w elementach w css, ale masz ca n i powinien umieścić elementy w elementach w html! Drzewo DOM i drzewo BEM mogą być różne.

Nie pisz dziwnych nazw, umieszczając nazwę elementu w nazwie bloku!

ŹLE:

.block {} 
.block-elem1 {} 
.block-elem1__elem2 {} 

bo masz problem z nazwami nieparzystych podczas próby przenieść blok:

<div class='other-block'> 
    <div class='block-elem1'></div> 
</div> 

zagnieżdżonych elementów HTML jest DOM-drzewo.
Nazwy klas, które piszesz, są drzewem BEM.
Poczuj różnicę!

DOM? A:

<ul> 
    <li> 
    <a> 
     <span></span> 
    </a> 
    </li> 
</ul> 

.ul {} 
.ul > li {} 
.ul > li > a {} 
.ul > li > a > span {} 

BEM drzewa:

<ul class="menu"> 
    <li class="menu__item"> 
    <a class="menu__link"> 
     <span class="menu__text"></span> 
    </a> 
    </li> 
</ul> 

.menu {} 
.menu__item {} 
.menu__link {} 
.menu__text {} 

Odniesienia:

„element jest integralną częścią bloku, który nie może być stosowany poza nim. " https://en.bem.info/methodology/key-concepts/#element

Element jest częścią bloku! Nie jest częścią elementu! Czytaj Witalij Harisov, autor BEM-metodologią: https://twitter.com/harisov/status/403421669974618112

ClassName jak "block__elem__elem___elem" oznacza, że ​​koder nie zrobił nic w BEM zrozumieć.

Czytaj także:

• https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2
• http://getbem.com/faq/#css-nested-elements

Jest raport (w języku rosyjskim) na WebCamp konferencji Web: Czołowy Developers Day na ten temat: https://www.youtube.com/watch?v=kBgHdSOj33A + slajdy: http://ihorzenich.github.io/talks/2015/frontendweekend-bem/