BEM CSS、全局和类命名答案

【问题标题】：BEM CSS, Globals, and Class namingBEM CSS、全局和类命名
【发布时间】：2019-03-10 15:23:12
【问题描述】：

我正在尝试确定一种用于标准化 CSS 中的类的方法，以用于多个项目。

我了解BEM 模型通过为独立样式指定块级元素来简化开发。我对这种方法的关注在于处理全局元素。

示例：

我有两个“模块”：新闻和事件。两个模块都有其项目列表，但在 site 1 上的模块是相同的，而在 site 2 上它们具有相当独特的样式。

目前的理解：

This post from 2014 让我相信最好的方法是：

<div class="news news--listing module module--listing">...</div>
<div class="events events--listing module module--listing">...</div>

我觉得这可能是最好的方法，因为任何全局样式都可以在module__listing 下处理，如果需要唯一性，可以使用特定的类。

不过，我和这里的孩子相处得更艰难。假设两者都有一个项目列表，这怎么能很好地接近？示例：

<div class="news news--listing module module--listing">
    <ul class="news__list item__list">
       <li class="news__item item">...</li>
    </ul>
</div>

这感觉有点过火了——但我不确定是否有更好的解决方案。我可以将这个命名约定保留在子列表中吗？

问题：

我想知道是否有任何我可能不知道的最佳方法，或者对维护这种方法有任何顾虑。

【问题讨论】：

标签： css naming-conventions bem

【解决方案1】：

块、元素、修饰符方法 (BEM)

使用你的例子，它会像：

<div class="[block]">
    <ul class="[block__element1]">
       <li class="[block__element2]">...</li>
       <li class="[block__element2] [block__element2--modifier]">...</li>
    </ul>
</div>

那么您的代码将如下所示：

<div class="news">
    <ul class="news__list">
       <li class="news__item">...</li>
       <li class="news__item news__item--selected">...</li>
    </ul>
</div>

注意修饰符 (news__item--selected) 后面总是跟元素类 (news__item)。

更多信息：

BEM 文档，快速入门：https://en.bem.info/methodology/quick-start/

BEM 示例：https://seesparkbox.com/foundry/bem_by_example

【讨论】：

【解决方案2】：

您可以使用Redefinition levels 的概念为不同项目中的相同实体设置不同的样式，同时仍将通用代码保留在一个位置，而无需添加额外的module 实体。

【讨论】：