Именование BEM-стиля со специальными компонентами

Question

Использование соглашений об именах BEM, как следует обрабатывать ситуации, когда компонент является специализацией базового компонента? (Здесь я использую вариант Николаса Галлахера).

Так предполагая, я набор стилей по умолчанию для table элементов и более специализированной стол с классом DataTable:

// Defaults 

table {} 
tr {} 
th {} 
td {} 

// DataTable 

.DataTable {} 
.DataTable-header {} 
.DataTable-header-row {} 
.DataTable-header-cell {} 
.DataTable-body {} 
.DataTable-body-row {} 
.DataTable-body-cell {} 

теперь у меня есть таблица, которая является конкретизацией DataTable, с различными твики в клетках:

.SpecialTable {} 
.SpecialTable-header {} 
.SpecialTable-header-row {} 
.SpecialTable-header-cell {} 
.SpecialTable-header-alphaCell {} 
.SpecialTable-header-betaCell {} 
.SpecialTable-header-charlieCell {} 
.SpecialTable-body {} 
.SpecialTable-body-row {} 
.SpecialTable-body-cell {} 
.SpecialTable-body-alphaCell {} 
.SpecialTable-body-betaCell {} 
.SpecialTable-body-charlieCell {} 

Это позволило бы означать мой SpecialTable будет выглядеть следующим образом:

<table class="DataTable SpecialTable"> 
    <theadclass="DataTable-header SpecialTable-header"> 
    <tr class="DataTable-header-row SpecialTable-header-row"> 
     <th class="DataTable-header-cell SpecialTable-header-cell SpecialTable-header-alphaCell"></th> 
     <th class="DataTable-header-cell SpecialTable-header-cell SpecialTable-header-betaCell"></th> 
     <th class="DataTable-header-cell SpecialTable-header-cell SpecialTable-header-betaCell"></th> 
    </tr> 
    </thead> 
    <tbody class="DataTable-body SpecialTable-body"> 
    <tr class="DataTable-body-row SpecialTable-body-row"> 
     <th class="DataTable-body-cell SpecialTable-body-cell SpecialTable-body-alphaCell"></th> 
     <th class="DataTable-body-cell SpecialTable-body-cell SpecialTable-row-betaCell"></th> 
     <th class="DataTable-body-cell SpecialTable-body-cell SpecialTable-row-betaCell"></th> 
    </tr> 
    </tbody> 
</table> 

Это правильный способ классификации таблицы?

Answer 1

Использование двух модулей на одном и том же элементе (class="DataTable SpecialTable") не является хорошей практикой, вместо этого создайте модификатор для модуля.

(запишет его в SASS)

.DataTable { 

    &-header {} 
    &-header-row {} 
    &-header-cell {} 
    &-body {} 
    &-body-row {} 
    &-body-cell {} 
} 

.DataTable--special { 
    .DataTable-header {} 
    .DataTable-header-row {} 
    .DataTable-header-cell {} 
    .DataTable-header-alphaCell {} 
    .DataTable-header-betaCell {} 
    .DataTable-header-charlieCell {} 
    .DataTable-body {} 
    .DataTable-body-row {} 
    .DataTable-body-cell {} 
    .DataTable-body-alphaCell {} 
    .DataTable-body-betaCell {} 
    .DataTable-body-charlieCell {} 
} 

И затем использовать его в качестве class="DataTable DataTable--special"