SMACSS、BEM 和 OOCSS 不便携吗？

Question

所以我对 OOCSS 有疑问。它应该更便携，但与我通常做的事情相比，我发现它不那么便携了。

我的例子：

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

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

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

使用这种“旧”方法，我可以将我的小部件从内容区域拖到页脚，颜色就可以正常工作 - 我不需要更改小部件的 CSS 或 DOM 类。

使用新的 OOCSS/BEM，我不应该将 .testimonial 类耦合到 ID（或位置），而是应该像这样子类化它：

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

这样做的问题是我不能再将我的推荐从内容区域拖到页脚而不进入 DOM 并更改推荐小部件上的类 - 它的可移植性较差，因为它需要开发人员手动干预；而在编辑器可以直接拖动它并且样式是自动的之前。

我错过了什么吗？似乎没有可靠的真实示例？

Answer 1

使用这种“旧”方法，我可以将我的小部件从内容区域拖到页脚，颜色就可以正常工作 - 我不需要更改小部件的 CSS 或 DOM 类。

如果你将元素.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 { }

在示例中，类完全独立于它们的页面上下文。结果是这些类是完全可重用的。页面上的任何框都可以采用上述类并期望完全按照定义进行样式设置。

例如，您可以：

<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>

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

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

当您在某处需要另一个元素时，可能是primary-box--standout，或者只是标题中的默认primary-box，您只需创建它并添加类，它们的样式将完全遵循。

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

这是一个非常真实的例子，我最近建立的一个网站几乎都是这样建立的，我说几乎都是因为我还在学习，但我可以保证我在快速上遇到的问题最少- 具有非常流畅的设计的移动项目是具有非特定上下文的项目。

重要的是缺乏上下文。在第一个示例中，.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;
  }
}

这将使用更具体的嵌套类表示法覆盖模块样式。请注意，我仍然会避免使用像 .header 这样的类名 - .banner-standout 会更好，因为它可以在任何地方重复使用而不会混淆

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

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

我发现这在上下文的实际项目中非常有效，同时保留了 BEM 的上下文无关功能，尽管我也敦促尽可能将这条链向上推到模块中。如果我识别出新的通用页面部分或模块并适当地重新组织命名和文件，生活会更轻松。在一个代码经过仔细重构的项目中，页面文件中没有任何内容。