Css 使用特殊组件的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 {}

这将意味着我的特殊物品将如下所示：

<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>

---

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

在同一元素上使用两个模块（

class=“DataTable SpecialTable”

）不是一种好做法，而是对模块进行修改

（将用SASS书写）

---

然后将其用作

class=“DataTable DataTable--special”

子体

标题行

，

标题单元格

等。必须重命名为

标题单元格

，

标题单元格

。看，这不是一个BEM约定，这是一个SUIT约定，在这两种方法中的任何一种都可以，唯一需要防止的是在同一个元素中使用两个模块子体

DataTable header行

（SUIT CSS中的BEM语法）无效。它相当于元素

数据表标题行

（来自Yandex的BEM语法），在BEM中无效，因为元素不能在BEM树中包含元素。确定。。。我们不是在讨论诉讼惯例。。。我只是建议将修饰符放在父模块/element上，我们可以这样解决

data-table\uuuuuu header\uuuu行

问题：

.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 {}
}