BEM-style naming with specialised components

Question

Using BEM naming conventions, how should situations where a component is a specialisation of a base component be handled? (I'm using Nicholas Gallagher's variant here).

So assuming I have a set of default styles for table elements and a more specialised table with a class of 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 that is a specialisation of DataTable, with a variety of tweaks to 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 then mean 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 class the table?

score 3 · Answer 1 · answered Jul 03 '15 at 18:48

3

Using two Modules on a same element ( class="DataTable SpecialTable" ) is not a good practice, instead make a modifier for the Module.

( will write it in 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 as class="DataTable DataTable--special"

answered Jul 03 '15 at 18:48

Dan Rocha

635
5
16

Descendants `header-row`, `header-cell`, etc. must be renamed to `headerRow`, `headerCell`. See [the conventions here](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md). – Paleo Jul 05 '15 at 11:00
that's not a BEM convention, that's a SUIT convention, it's ok in any of the two approaches, the only thing needed to prevent is using two modules in the same element – Dan Rocha Jul 05 '15 at 11:54
The descendant `DataTable-header-row` (BEM syntax from SUIT CSS) is invalid. It would be equivalent to the element `data-table__header__row` (BEM syntax from Yandex), which is not valid in BEM because an element can't contain an element in the BEM tree. – Paleo Jul 05 '15 at 18:59
ok... we're not discussing SUIT conventions here... I just recommended the modifier to be on the parent module / element – Dan Rocha Jul 05 '15 at 19:04
We can solve `data-table__header__row` problem this way: `.c-dtbl { $this: &; &__hdr {} &__r {} &__hdr { #{$this}__r { // stuff } } }` – lexeme Jan 26 '20 at 18:44

BEM-style naming with specialised components

1 Answers1