11

所以我对 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 并更改推荐小部件上的类 - 它的可移植性较差，因为它需要开发人员的手动干预；而在编辑器可以拖动它并且样式是自动的之前。

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

4

2 回答 2

5

您需要考虑删除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 巫术涵盖了这个确切的主题

编辑：我添加了这个例子来帮助对我的回答发表评论。这不是 BEM 或 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 的上下文无关功能，尽管我也敦促尽可能将此链推入模块中。如果我识别出新的通用页面部分或模块并适当地重新组织命名和文件，生活会更轻松。在一个代码经过仔细重构的项目中，页面文件中没有任何内容。

于 2015-06-30T19:58:03.360 回答
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 更好地重用。

于 2015-05-28T09:58:36.320 回答