使用 BEM 命名方法编写 CSS 时如何实现主题？答案

【问题标题】：How to implement a theme when writing CSS using BEM naming methodology?使用 BEM 命名方法编写 CSS 时如何实现主题？
【发布时间】：2016-10-07 00:54:25
【问题描述】：

我在我正在处理的项目中使用 BEM CSS 命名约定。到目前为止一切都很顺利。但是我需要在同一个 html 页面上实现几个主题（意味着稍微不同的设计）。写这个：

.name-of-theme .block1 {
    ...
}

.name-of-theme .block2 {
    ...
}

不会是 BEM，但允许在 body-tag 中放置一个修饰符。

这样写：

.block1--name-of-theme {
   ...
}

.block1--name-of-theme {
   ...
}

将是 BEM，但也意味着在 HTML 中编写大量冗余代码，因为每个受影响的块都必须使用额外的 CSS 类进行修改。这也很难维护。

是否有一种与 BEM 兼容的方法来解决这个问题而无需编写冗余代码？

【问题讨论】：

嗯，你选择了BEM作为你的命名系统，它不会因为你随意选择类名而打击你，你为什么不自己决定你喜欢什么？不使用 BEM 不会使您的代码无法运行。
要回答你的问题，不，BEM 本身就是多余的。恕我直言，BER 是一个相当糟糕的命名系统，它不允许您继承和嵌套依赖项，我认为这会导致代码更清晰。但毕竟那是基于意见的。
好吧，我可能会因为不遵守自己选择的惯例而自责。但正如你所说 - 这都是基于意见的。为抽出时间欢呼。
好吧，这就是重点，您出于某种原因选择了您的 namimg 方法，所以我认为您应该知道如何处理它；)

标签： html css bem

【解决方案1】：

让我在 bem.info 上引用一段FAQ：

嵌套适用于根据状态改变元素块或其指定的主题

【讨论】：

干杯！我怎么能忽略这一点？正是我正在寻找的答案。