BEM: Jakie modyfikatory można modyfikować?

Question

Powiedzmy mam następujący CSS dla rodzajowego listy składników, z użyciem BEM i SCSS:

.list { 
    &__item { 
    &:not(:last-child) { 
     margin-right: .3em; 
    } 
    } 
} 

chcę dodać modyfikator, który może wnieść listę pionowo, jak w przykładzie:

.list--vertical { 
    display: flex; 
    flex-direction: column; 
} 

Mój problem powstaje, gdy myślę o marży dla elementów list__item. W przypadku list pionowych chcę mieć mój margines na dole, a nie na prawo każdego elementu. Jeśli dobrze zrozumiałem BEM, nie mogę zmienić stylu list__item na podstawie modnisia z listy, czy to prawda?

Aby być bardziej precyzyjnym, to jest to, co chcę zrobić:

.list--vertical { 
    display: flex; 
    flex-direction: column; 

    .list__item { 
    &:not(:last-child) { 
     margin-bottom: .3em; 
     margin-right: 0; 
    } 
    } 
} 

Jaki jest akceptowanym sposobem radzenia sobie z tym, stosując BEM? Kolejny modyfikator dla list__item, który obsługuje margines? Kolejny blok przeznaczony wyłącznie na listy pionowe?

Answer 1

Jaki jest akceptowany sposób radzenia sobie z tym przy użyciu BEM?

Zależy od używanej wersji BEM. Używam a variant of the pre-spec concept of BEM, co oznacza, że ​​będziesz mieć różne odpowiedzi, jeśli podążysz za bem.info.

---

Modyfikatory należy dołączyć do modyfikowanego elementu. Modyfikacja bloku, jednak pozwala modyfikator być dziedziczone przez elementy podrzędne:

<div class="foo foo--example"> 
    <div class="foo__bar foo--example__bar">...</div> 
<div> 

To dostaje niechlujny kiedy elementy potomne mają modyfikatory, a także:

<div class="foo foo--example"> 
    <div class=" 
    foo__bar 
    foo--example__bar 
    foo__bar--another-example 
    foo--example__bar--another-example">...</div> 
<div> 

Ta forma składni BEM jest dość rozwlekły. Najlepiej jest go stosować w wygenerowanym kodzie.

---

używam mniej dla CSS wyprzedzającym, więc mój kod BEM często wygląda tak:

.foo { 
    ... 

    &__bar { 
    ... 
    } 
} 

modyfikatory staje:

.foo { 
    ... 

    &__bar { 
    ... 
    } 

    &--example { 
    ... 

    &__bar { 
     ... 
    } 
    } 
} 

To wymusza, że ​​kaskada jest właściwa kolejność i że wszystkie selektory nadal mają dokładnie jedną klasę.