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

Question

所以我对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魔法涵盖了这个确切的主题

编辑：，我添加了这个例子，以帮助我的答案上的评论。这不是边界元，也不是OOCSS，尽管它更接近SMACSS方法。这就是我如何处理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的上下文自由能力，尽管我也会尽可能地敦促将这条链向上推到模块中。如果我认识到一个新的通用页面部分或模块，并适当地重新组织命名和文件，生活就会更容易一些。在一个代码被仔细重构的项目中，我在页面文件中什么也没有。

Answer 2

使用这种“旧”方法，我可以将我的小部件从内容区域拖到页脚，颜色将简单地工作-我不需要更改小部件的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更好地被重用。