css - 基于 "inner" block 修饰符的样式元素

Question

是否可以根据“内部修饰符”从“外部”设置 block 样式？这是一个例子:

HTML

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

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

我知道在做出此类决定时没有绝对的对错，但如果有人能指出每种方法的优缺点，我将不胜感激。

Answer 1

这取决于你想要的风格。

“--expanded”修饰符是否对所有按钮通用？或者只针对 Header__button？

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

如果你想有更多的全局按钮修饰符，使用方法 1。