在使用全局样式时我有点困惑。请考虑以下事项:
假设我有一个样式表,它定义了应该如何制作按钮:
/* Button.CSS */
button {
background-color: #CCC;
}
button.Blue {
background-color: #00F;
color: #FFF;
}
Button.Blue.Hollow {
background-color: none;
border: 1px solid #00F;
color: #00F;
}
然后您使用带有标准 BEM 符号的模板中的按钮(我将使用 Block__Element--Modifier 符号)
<!-- index.html -->
<ul class="Widget">
<li class="Widget__Item">
<button class="Widget__Button"></button>
</li>
<li class="Widget__Item">
<button class="Widget__Button Blue"></button>
</li>
<li class="Widget__Item">
<button class="Widget__Button Blue Hollow"></button>
</li>
</ul>
像这样混合类是可以接受的做法吗?我觉得我违反了封装 block 样式的一些规则。
最佳答案
I feel like i'm violating some rule of encapsulated block styling.
的确如此。
Button
应该是一个 block ,而不是一个元素。 Blue
和 Hollow
是修饰符。
使用 Block__Element--Modifier
语法,您的代码应该是:
.Button {
background-color: #CCC;
}
.Button--Blue {
background-color: #00F;
color: #FFF;
}
.Button--BlueHollow {
background-color: none;
border: 1px solid #00F;
color: #00F;
}
<ul class="Widget">
<li class="Widget__Item">
<button class="Button"></button>
</li>
<li class="Widget__Item">
<button class="Button Button--Blue"></button>
</li>
<li class="Widget__Item">
<button class="Button Button--Blue Button--BlueHollow"></button>
</li>
</ul>
或者,您可以使用 MyBlock-myElement.myModifier
语法(更接近您的方式):
.Button {
background-color: #CCC;
}
.Button.blue {
background-color: #00F;
color: #FFF;
}
.Button.blue.hollow {
background-color: none;
border: 1px solid #00F;
color: #00F;
}
<ul class="Widget">
<li class="Widget-item">
<button class="Button"></button>
</li>
<li class="Widget-item">
<button class="Button blue"></button>
</li>
<li class="Widget-item">
<button class="Button blue hollow"></button>
</li>
</ul>
关于css - 具有通用样式的 BEM CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27132769/