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

【问题标题】：Is it better to import a pre-written rule for each CSS style or to write your own rule (OOCSS)?是为每种 CSS 样式导入预先编写的规则还是编写自己的规则 (OOCSS) 更好？
【发布时间】：2012-02-08 11:03:55
【问题描述】：

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

虽然我认为这是一个很棒的抽象形式的提案，但从适用的角度来看，我很难理解它。 [阅读下面我的具体问题，但我一直在寻找阅读材料，所以请随时停下来并评论一些指向 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、@987654330 @、font-weight 等。这些“子类”写在样式表中在.heading 之后的事实表明，如果它们中的任何一个包含具有不相等值的相等属性，那么@987654333 中的属性@ 将被“子类”中的那个覆盖。为了得到我的标题 1，我会写：

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

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

[当然，我想说的是

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

但我们还没有完全到那个时候。]

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

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

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

    <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(or paragraph-special or whatever)然后在CSS中分配所有这些规则不是更有意义吗？不需要乐高积木？就我而言，我不能将.alpha {text-align: center;} 添加到我的联系人页面顶部吗？或者甚至是在线？

【问题讨论】：

标签： css css-selectors oocss

【解决方案1】：

OOCSS 方式的重点不是主要从其他库中借用 CSS sn-ps，并且仅在您执行以前没有人做过的事情时编写新规则。显然这是不可能的，而且可能不会比自己滚动更好。

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

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

CSS 中的等价物是使用类作为 mixins。例如，如果你使用了很多 <ul> 元素并且你发现你不断地设置 margin 和 padding 为 0 并且列表样式为 none，你可能应该编写一个 .reset 类来为你做这些并且将该类应用于您的<ul>，而不是为所有导航和列表项一遍又一遍地编写相同的三个规则。

另一点是你需要从视觉的角度来考虑你的抽象，例如，如果你发现你网站的大部分部分都存在于带有边框的盒子中，你可以创建一个基本类，如：

.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 类很重要。后者很荒谬。如果你打算这样做，你也可以使用内联样式。

【讨论】：

【解决方案2】：

我认为使用 .txtC 或 .dark-blue 之类的东西违背了 CSS 的精神，在 CSS 中，您应该能够通过使用不同的样式表来改变网站的整体外观。

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

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

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

【讨论】：

您说的是structural naming convention，而不是表示命名约定。

【解决方案3】：

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

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

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

【讨论】：