BEM CSS、全局和 Class 命名

Question

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

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

示例：

我有两个 "modules"：新闻和事件。这两个模块都有它们的项目列表，但在 站点 1 上，模块是相同的，而在 站点 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 下处理，如果需要唯一性，可以使用特定的类。

不过，我和 children 在一起的时候比较艰难。假设两者都有一个项目清单，这怎么能很好地处理呢？示例：

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

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

问题：

我想知道是否有任何我可能不知道的最佳方法，或者是否存在维护这种方法的任何问题。

Answer 1

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

Answer 2

块、元素、修饰符方法 (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) 后面始终跟有元素 class (news__item)。

更多信息：

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

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

BEM CSS、全局和 Class 命名

BEM CSS, Globals, and Class naming

css

naming-conventions

bem