1

我正在阅读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等。事实上，这些“子类”是在后面写的 .heading在样式表中表示如果它们中的任何一个包含具有不相等值的相等属性，则该属性.heading将被“子类”中的属性覆盖。为了得到我的标题 1，我会写：

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

事实上，我可以为任何元素设置样式，例如span, with class="heading alpha"，但这确实是一个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 规则和类进行一对一的对应有点过分。如果我使用这种方法，那么我就不需要编写任何自己的样式表，而只需将一堆小类（“legos”）添加到我的 HTML 代码中，使其变得庞大且不可读。想象一下：

    <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;}到我的联系人页面的顶部吗？或者甚至是在线的？

4

3 回答 3

1

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

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

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

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

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

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

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

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

就您对 HTMLclass="ital size-medium sans-ser txtJ med-height dark-blue"的看法而言，重要的是要区分创建定义视觉对象的 CSS 类和仅定义 CSS 属性的 CSS 类。后者很荒谬。如果你打算这样做，你也可以使用内联样式。

于 2012-01-12T05:41:50.973 回答
0

我认为使用类似.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 和类名描述它所影响的内容，而不是它提供的样式。

于 2012-01-12T06:38:37.873 回答
0

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

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

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

于 2013-03-25T21:10:22.860 回答