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

您需要考虑删除 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 的上下文无关功能，但我也强烈建议尽可能将此链向上推到模块中。如果我识别出新的通用页面部分或模块并适本地重新组织命名和文件，生活就会更轻松。在一个代码已经被仔细重构的元素中，我的页面文件中没有任何内容。