Question

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

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

示例：

我有两个“模块”：新闻和事件。这两个模块都列出了它们的项目，但是在站点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下处理，并且如果需要唯一性，则可以使用特定的类。

尽管如此，我和孩子们在这里度过了艰难的时光。假设两个都有物品清单，如何才能很好地解决？示例：

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

感觉就像落伍了-但我不确定是否有更好的解决方案。我只是将此命名约定保留在子列表中吗？

问题：

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

Answer 1

您可以使用Redefinition levels的概念使不同项目上的相同实体具有不同的样式，并且仍将通用代码放在一个位置，而无需添加其他module实体。

Answer 2

块，元素，修饰符方法（BEM）

以您的示例为例，

Name                        Role    XP    Acumen
0   Johnny Tsunami        Driver    1000      39
1   Michael B. Jackson    Pistol    2500      46
2   Bobby Zuko            Pistol    3000      50
3   Greg Ritcher         Lookout    200       25
4   Johnny Tsunami        Driver    1000      39
5   Michael B. Jackson    Pistol    2500      46
6   Bobby Zuko            Pistol    3000      50
7   Appa Derren          Lookout    250       30
8   Baby Hitsuo           Driver    950       35
9   Michael B. Jackson    Pistol    2500      46
10  Bobby Zuko            Pistol    3000      50
11  Appa Derren          Lookout    250       30

然后您的代码应如下所示：

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

请注意，元素类（news__item）总是跟随修饰符（news__item--selected）。

更多信息：

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

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

BEM CSS，全局变量和类命名

2 个答案: