使用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>
这是对表格进行分类的正确方法吗?
答案 0 :(得分: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"