Question

我的OOCSS存在问题。它应该更加便携，但与我通常做的事情相比，我发现它不那么容易。

我的例子：

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

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

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

用这个＆＃34; old＆＃34;方法，我可以将我的小部件从内容区域拖到页脚，颜色就可以了 - 我不需要更改我的小部件的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中包含这些类的区域。 / p>

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

如果你需要另一个元素，可能是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的上下文自由功能，尽管我也会尽可能地推动这个链进入模块。如果我识别新的通用页面部分或模块并适当地重新组织命名和文件，生活会更容易。在一个小心重构代码的项目中，我在页面文件中没有任何内容。

Answer 2

用这个＆＃34; old＆＃34;方法我可以将我的小部件从内容区域拖到页脚，颜色就可以了 - 我不需要更改小部件的CSS或DOM类。

如果你＆＃34;拖＆＃34;从容器.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可以更好地重复使用。

SMACSS，BEM和OOCSS不是便携式的吗？

2 个答案: