SMACSS、BEM 和 OOCSS 不是可移植的吗？

Question

所以我遇到了 OOCSS 的问题。它应该更便携，但与我通常做事的方式相比，我发现它不那么便携。

我的例子：

我有一个小部件推荐。在主要内容正文（具有白色背景）中，推荐使用黑色字体。但在页脚（具有蓝色背景）中，推荐需要白色字体。

在 OOCSS 之前，我会做这样的事情：

#main-content .testominial {
  color: #000000;
}
#footer .testominial {
  color: #FFFFFF;
}

使用这种 "old" 方法，我可以将我的小部件从内容区域拖到页脚，并且颜色会很简单 - 我不需要更改我的 CSS 或 DOM classes 的小部件。

有了新的 OOCSS/BEM，我不应该将 .testimonial class 与 ID（或位置）结合起来，而是我应该像这样子 class所以：

.testominial {
  color: #000000;
}
.testominial--footer {
  color: #FFFFFF;
}

这个问题是，如果不进入 DOM 并更改推荐小部件上的 classes，我就无法再将我的推荐从内容区域拖到页脚 - 它是便携性差，因为它需要开发人员手动干预；而在编辑器可以拖动它并且样式是自动的之前。

我错过了什么吗？似乎没有可靠的现实世界的例子？

Answer 1

With this "old" approach I could drag my widget from the content area to the footer and the colours would simply work - I wouldn't need to change my CSS or DOM classes of the widget.

如果你"drag"元素.testominial从容器.main-content到容器.main-footer，那就是你改变了DOM。所以你也可以在CSS类更新修改器，没有额外的费用。

BEM 的目的是使 CSS 类可重用。以下修饰符可以在各种环境中重复使用。

CSS:

.testominial {
}
.testominial--darkFg {
    color: #000;
}
.testominial--lightFg {
    color: #FFF;
}

HTML:

<main class="main-content">
    <div class="testominial testominial--darkFg">...</div>
</main>
<footer class="main-footer">
    <div class="testominial testominial--lightFg">...</div>
</footer>

使用旧方法，每次需要在新容器中添加新块 .testominial 时，都必须更改 CSS 代码。 HTML和CSS强耦合，部分CSS代码会重复

使用 BEM 方法，每次设计人员添加块外观的新变体时，您都必须添加一些 CSS 代码。 HTML和CSS耦合度较低，CSS重用更好

Answer 2

您需要考虑放弃 testimonial 命名以及 footer。

考虑这个例子：

.primary-box { }
.primary-box--reduced { }
.primary-box--standout { }

在示例中，classes 完全独立于它们的页面上下文。结果是 classes 完全是 re-usable。页面上的任何框都可以采用上面的 classes 并期望其样式完全符合定义。

例如，您可以：

<header>
    <div class='primary-box primary-box--reduced'></div>
</header>
<div class='content-box'>
    <p class='primary-box primary-box--standout'></p>
</div>
<footer>
    <div class='primary-box primary-box--reduced'></div>
</footer>

现在，当设计师回来调整突出框的填充时，您可以直接转到这些样式并进行调整，确信唯一会受到影响的区域将是具有这些样式的区域 classes 在 HTML.

此外，当您决定将 .primary-box--reduced 从 <header> 移动到位于其上方的菜单栏或页脚中时，您可以确信样式会完全一致.

当你在某处需要另一个元素时，可能是 primary-box--standout，或者只是 header 中的默认 primary-box，你只需创建它并添加 classes ，他们的风格将完全遵循。

你也永远不会继承意想不到的风格。

这是一个非常真实的例子，我最近建的一个网站几乎都是这样建的，我说几乎都是因为我还在学习，但我可以保证我在具有非常流畅设计的 fast-moving 项目是具有 non-specific 背景的项目。

重要的是缺乏上下文。在第一个示例中，.testimonial--footer 非常依赖于上下文，您真的只需要在页脚的推荐中使用它。

就像变魔术一样CSS Wizardry cover this exact topic

编辑：我添加了这个例子来帮助对我的回答发表评论。这不是 BEM 或 OOCSS，尽管它更接近 the SMACSS approach。这就是我用 css 解决问题的方式，是一种混合 BEM / SMACSS 方法：

已按顺序加载：

模块文件，例如.primary-box
页面部分文件，例如 .header 或 .call-to-action
页面文件，例如.about-us或.contact

每个文件变得越来越具体，同时构建更复杂和模块。基于上面的示例并希望对 OP 有所帮助，您可以看到如下样式：

.header {
  .primary-box {
    color: #000;
  }
}

这将 over-ride 模块样式使用更具体的嵌套 class 表示法。请注意，我仍然会避免使用像 .header 这样的 class 名称 - .banner-standout 会更好，因为它在任何地方都是 re-usable 而不会混淆

接下来，你甚至可以看到：

.about-us {
  .header {
    .primary-box {
      color: #f00;
    }
  }
}

我发现这在实际项目中对于上下文非常有效，同时保留了 BEM 的上下文无关功能，但我也强烈建议尽可能将此链向上推到模块中。如果我识别出一个新的通用页面部分或模块并且 re-organise 适当地命名和文件，生活就会更轻松。在一个代码经过精心重构的项目中，我的页面文件中没有任何内容。

SMACSS、BEM 和 OOCSS 不是可移植的吗？

Are SMACSS, BEM and OOCSS not as portable?

html

css

oocss

bem

smacss