Question

根据“内部修饰符”，可以从“外部”设置块的样式吗？这是一个例子：

HTML

<div class="Header">
    <div class="Button Header__button">
        Seperate Block with optional modifier Button--expanded
    </div>
</div>

button.css

.Button--expanded {
    height: 100%; /* Default height of expanded buttons */
}

header.css

/* Expanded buttons within header have a different height */

/* Approach 1*/
.Header__button.Button--expanded {
    height: 32px;
}

/* Approach 2*/
.Header__button--expanded {
    height: 32px;
}

Button--expanded类是由一些模块化JS动态添加的，它只知道Button控件/块本身。因此Approach 1“开箱即用”，而Approach 2需要一些额外的JS以某种方式将expanded状态冒泡到Header控件以设置显式修饰符类{ {1}}到Header__button--expanded元素...

我知道在做出这样的决定时没有绝对的对错，但我真的很感激，如果有人可以指出专业人士和每种方法的缺点。

Answer 1

这取决于你想要的风格。

是＆＃39; - 扩展＆＃39;修饰符对所有按钮都很常见？或仅适用于Header__button？

如果您只想为标题添加修饰符，请使用方法2.

如果您想拥有更多全局按钮修改器，请使用方法1。

基于“内部”块修饰符的样式元素

1 个答案: