为每种 CSS 样式导入预先编写的规则还是编写自己的规则 (OOCSS) 更好？

Question

我正在阅读一些 Nicole Sullivan 关于 面向对象的 CSS。简而言之，基本思想是，与其每次设计网站时都从头开始，不如使用一些已经编写的基本构建块作为类，然后扩展它们以满足我们的需求。 （“扩展”包括向 HTML 添加更具体/覆盖的类，因为 CSS 类不可能相互继承规则……希望在 CSS4 中？:) OOCSS 原则的灵感来自于这样一个事实：您不需要每隔一段时间重写 Java Math 类你需要的时间求双数的正弦值。代码已经（由某人）编写了，为什么不使用它呢？

虽然我认为这是一个抽象形式的伟大提案，但我很难从适用的角度理解它。 [请阅读下面的内容来了解​​我的具体问题，但我一直在寻找阅读材料，因此请随时停下来并评论一些更多 OOCSS 资源的链接，例如优点和批评等]

这是我的样式表：

.heading {...} /* for all heading styles */
  .alpha   {...} /* specific changes for h1 */
  .beta    {...} /* specific changes for h2 */
  .gamma   {...} /* specific changes for h3 */
  .delta   {...} /* specific changes for h4 */
  .epsilon {...} /* specific changes for h5 */
  .zeta    {...} /* specific changes for h6 */

现在第一个选择器适用于任何标题，具有常见属性，例如 font-family、letter-spacing 等。然后每个“子类”(不是真正的子类）有特定的差异例如color、font-style、font-weight等。事实上，这些“子类”是在之后编写的 em> 样式表中的 .heading 表示如果它们中的任何一个包含具有不同值的相同属性，则 .heading 中的属性将被“子类”中的属性覆盖。为了获得我的标题 1，我会这样写：

<h1 class="heading alpha">Contact Me</h1>

事实上，我可以使用 class="heading alpha" 来设置任何元素的样式，例如 span，但实际上这确实是一个 h1 元素。

[当然，我希望能够说

.heading {...}
  .alpha {
      extends: .heading;
      ...
  }
==============================
<h1 class="alpha">Contact</h1>

但我们还没有完全做到这一点。]

我的问题是，如果标题 alpha< /code> 通常是左对齐的，我该怎么做才能使这个实例居中？ Nicole 会说我应该导入她的样式表并使用她的 .txtC {text-align:center;} 规则，所以我的代码将变成：

<h1 class="heading alpha txtC">Contact Me</h1>

但我认为与 CSS 规则和类基本上一一对应有点过分了。如果我使用这种方法，那么我不需要编写任何自己的样式表，而只需在我的 HTML 代码中添加一堆小类（“lego”），使其变得庞大且不可读。想象一下：

    <p class="ital size-medium sans-ser txtJ med-height dark-blue">This is a 
    size 12pt, italic, Arial, left-right justified, 1.2em line height, dark 
    blue paragraph.</p>

编写一个类 specialParagraph 不是更有意义吗？ （或paragraph-special或其他）然后在CSS中分配所有这些规则？不需要乐高积木吗？就我而言，我不能将 .alpha {text-align: center;} 添加到我的“联系方式”页面的顶部吗？或者甚至可能是在线的？

Answer 1

OOCSS 方法的要点并不是主要从其他库借用 CSS 片段，并且仅在您做以前没有人做过的事情时才编写新规则。显然这是不可能的，而且可能并不比自己动手更好。

OOCSS 的要点是尽可能抽象你的样式。它们越具体，可重用性就越差，当你这样做时，你最终会编写更多的 CSS。

用编程术语来说，不是创建一个汽车类，然后创建一个共享各种通用方法的卡车类，而是创建一个车辆类，然后从该类扩展汽车和卡车。

CSS 中的等价物是使用类作为 mixins。例如，如果您使用大量

元素，并且您发现不断将边距和填充设置为 0，并将列表样式设置为无，那么您可能应该编写一个 .reset 类可以为您执行此操作，并将该类应用于您的
，而不是为所有导航和列表项一遍又一遍地编写相同的三个规则。

另一点是，您需要从视觉角度考虑抽象，例如，如果您发现网站的大部分部分都位于周围有边框的框中，则可以创建一个基本类，例如

.bordered-box {
    border-style:solid;
    border-width:1px;
    margin-bottom:20px;
    padding:20px;
}

：创建其他类来混合 .bordered-box 上未定义的样式，例如颜色和宽度等。

将您的 css 类视为您将用来构建的工具箱一个网站，而不是仅仅将其视为一个列表您可以向元素添加属性以使它们看起来某种特定的方式。

对于您关于 HTML 的观点，如下所示：class="ital size-medium sans-ser txtJ med-height dark-blue"，区分创建定义视觉对象的 CSS 类和创建定义视觉对象的 CSS 类非常重要。只需定义 CSS 属性即可。后者是荒谬的。如果您打算这样做，您也可以使用内联样式。

Answer 2

我认为使用 .txtC 或 .dark-blue 之类的东西违背了 CSS 的精神，在 CSS 中你应该能够改变网站的整体外观和感觉只需使用不同的样式表即可。

例如，对于可能出现的问题，假设您决定希望所有标题都为红色而不是蓝色。您必须遍历 HTML 的每个页面并将 dark-blue 类替换为 ，而不是简单地将 CSS 更新为 .header { color: red }红色。或者你可以将 CSS 更改为 dark-blue { color: red; }，但是类名没有任何意义。

如果您为每个可以想象到的规则添加一个类，那么您最终将回到内联样式和每个元素上的 align="center" 的黑暗时代。

如果你打算使用“面向对象”CSS，它应该以一种更像你的 .header 类的方式使用，它会影响你的所有标题，但是如果你想要不同的字体主页标题的颜色，您需要添加一个额外的 .header.home { color: 青色; CSS 规则。您希望 CSS ID 和类名称来描述它所影响的内容，而不是它所提供的样式。

Answer 3

“面向对象的 CSS”实际上只是一种如何充分利用 CSS 的设计模式，基本上与 Jonathan Snooks 调用的方法相同 SMACSS。

无论您将其称为 OOCSS 还是 SMACSS，该方法的关键是创建通用 UI 元素，例如 导航抽象。然后，可以通过向元素和/或容器元素添加额外的类来增强这些 UI 元素的更具体功能。或者，作为替代方案，您可以使用元素的 ID 或语义类添加自己的自定义 CSS 规则。

Cascade Framework 是一个基于这种方法的全新 CSS 框架。它只需占用很小的空间即可为您提供最佳的性能、最佳的灵活性和最佳的模块化性。