Question

我在Nicole Sullivan的Object-Oriented CSS的理论上读了一下。简而言之，基本的想法是，每次我们设计一个网站时，不是从头开始，而是将一些已经编写的基本构建块用作类，然后扩展它们以满足我们的需求可能更好。（“扩展”包含向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等。然后每个“子类”（实际上不是子类）都有特定的差异，例如{{ 1}}，color，font-style等。这些“子类”在样式表中 font-weight之后写成的事实表明，如果其中任何一个包含使用不等值的相等属性，.heading中的属性将被“子类”中的属性覆盖。为了得到我的标题1，我会写：

.heading

事实上，我可以使用<h1 class="heading alpha">Contact Me</h1>设置任何元素，例如span，但实际上这确实是class="heading alpha"元素。

[当然，我希望能够说

h1

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

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

heading alpha

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

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

编写一个类<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> (or paragraph-special or whatever)然后在CSS中分配所有这些规则会不会更有意义？不需要legos？就我而言，我不能只将specialParagraph添加到联系人页面的顶部吗？或者甚至可以在线？

Answer 1

OOCSS方式的目的不是主要从其他库中借用CSS片段，而只是在你做以前没有人做过的事情时编写新的规则。显然这不可能，也可能没有比滚动你自己更好的了。

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

以编程术语来说，不是制作汽车类，而是分享各种常用方法的卡车类，而是制作汽车类，然后从汽车和卡车延伸。

与CSS相同的是使用类作为mixins。例如，如果你使用了很多<ul>个元素，并且发现你经常将margin和padding设置为0并将样式列表为none，那么你应该写一个.reset类来做这适用于您，并将课程应用于<ul>，而不是为您的所有导航和列表项反复编写相同的三个规则。

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

.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更新为.header { color: red }，而是必须浏览HTML的每个页面，并将dark-blue类替换为red。或者您可以将CSS更改为dark-blue { color: red; }，但是类名称没有任何意义。

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

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

Answer 3

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

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

Cascade Framework是基于此方法的全新CSS框架。它为您提供最佳性能，最佳灵活性和最佳模块化，占用空间小。

为每种CSS样式导入预先编写的规则或编写自己的规则（OOCSS）更好吗？

3 个答案: