3

使用 BEM 命名约定，应该如何处理组件是基础组件的特殊化的情况？（我在这里使用 Nicholas Gallagher 的变体）。

因此，假设我有一组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>

这是对表格进行分类的正确方法吗？

4

1 回答 1

3

在同一个元素上使用两个模块（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"

于 2015-07-03T18:48:28.257 回答