BEM style naming with custom components
Using BEM naming conventions, how should you handle situations where a component is a specialization of a base component? (I'm using Nicholas Gallagher's variation here).
So, suppose I have a set of default styles for elements table
and a more specialized table with a class DataTable
:
// Defaults
table {}
tr {}
th {}
td {}
// DataTable
.DataTable {}
.DataTable-header {}
.DataTable-header-row {}
.DataTable-header-cell {}
.DataTable-body {}
.DataTable-body-row {}
.DataTable-body-cell {}
I now have a table, which is a specialization DataTable
, with a lot of settings for the cells:
.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 {}
This would mean that my SpecialTable would look like this:
<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>
Is this the correct way to classify a table?
source to share
Using two modules on the same element ( class="DataTable SpecialTable"
) is not good practice, instead create a modifier for the module.
(will write it to 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 {} }
And then use it like class="DataTable DataTable--special"
source to share