BEM:如何确保块内的CSS值覆盖另一块中定义的属性?
问题描述:
我正在使用BEM,并且在从一个块中获取属性以覆盖另一个块中的样式时遇到问题。我知道有些人可能会建议为.button添加修饰符,但有些情况下某些属性需要应用于单个页面,所以不必添加整个其他修饰符。BEM:如何确保块内的CSS值覆盖另一块中定义的属性?
下面是一个例子,是想说明我的问题:
.button {
padding-left: 0;
}
现在,当我去加入填充左,它越来越padding-left: 0;
,而不是我想使用真实.my-block
下定义的值。
.my-block {
&__button {
padding-left: 5px;
}
}
什么是保证padding-left: 5px;
而不是padding-left: 0;
得到应用的最佳方式是什么?
答
我假设你使用的混合,使标记看起来像这样:
<button class="button my-block__button">
如果这是你需要确保在束(.button的造型应该.my-block__button
之前经常去)的顺序的情况。
在BEM Platform我们使用deps system它给了我们这个保证。