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

【问题标题】：Style element based on "inner" block modifier基于“内部”块修饰符的样式元素
【发布时间】：2017-08-04 10:03:34
【问题描述】：

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

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

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

【问题讨论】：

标签： css bem

【解决方案1】：

这取决于您想要的样式。

'--expanded' 修饰符对所有按钮都是通用的吗？还是仅适用于 Header__button？

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

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

【讨论】：