面向对象的 CSS：吸引人的流行语还是合法的设计方法？

Question

Web 开发领域似乎出现了一个新的流行语：面向对象的 CSS。

从表面上看，我觉得这只是将最佳实践包装在一个朗朗上口的口号中。 我理解并完全尊重该运动背后的意图，但还有更多吗？

有没有人有任何进一步的见解，可以将这种方法区分为更可信的方法，或者我应该将其作为一个提醒，以确保我正确继承和级联我的类？

Answer 1

我想说，这更像是 CSS 中已经存在的一些吸引人的流行语。 当然，在我们开始讨论什么是 OO、什么不是以及 CSS 如何面向对象之前，我们必须先定义它到底是什么——这是其他人之前一直在努力解决的问题，并且引起了激烈的争论。 但是如果我们假设OO的基本原则是：

• 类
• 对象
• 实例
• 方法
• 消息传递
• 继承
• 抽象
• 封装
• 多态
• 解耦

我们可以说，级联样式表在某种程度上是面向对象的，因为它们允许定义类、创建实例/对象（通过将类分配给元素）、类的继承（甚至多重继承）、抽象（例如通过为普通元素定义样式）和多态性（通过为不同元素定义相同的类名）。 当然，由于 CSS 的静态特性，方法/消息传递是不可能的。

所以总的来说，我会说它是一种以面向对象的方式开发 CSS 的有效方法，但我不会真正将其称为面向对象的 CSS，因为至少对我来说，它是 CSS 深深固有的东西。 这有点像说“我正在做面向对象的 Java...”

Answer 2

吸引人的流行语和合理的设计方法。

尽管我认为其中的一些想法有点天真，因为他们往往忘记了“客户端随其发展而改变一切”的 Web 开发范例。

Answer 3

我认为称其为“面向对象 CSS”的流行语实际上损害了它的实用性和该概念的更广泛采用。

当我阅读它时，我认为它是面向对象的主张实际上减慢了我对它到底是什么的理解。

知道“面向对象”在编程中意味着什么的人会对此表示怀疑，因为它并不是真正的面向对象，不是吗？ 只是尝试将一些OO原则应用到CSS中来提高其效率。 另一方面，如果大多数客户端开发人员不是程序员，他们根本不会理解这个概念，因此他们只会感到困惑或尴尬。

所以，伟大的概念需要重塑。 最大CSS！ 强大的CSS！ CSS 重生！ CSS 平方！ CSS 总理！ 类似的事情。

Answer 4

我已经这么说了很多年了。

CSS 选择器基于实例 ID 和类。 它甚至支持多重继承。 这能更明显吗？

从对象角度思考 CSS 的美妙之处在于，开始“铸造”标记元素变得非常简单。 需要那个 div 突然变成 INotRenderedAnymore 吗？ 只需让 JS 扩展其类属性以匹配 .removed 即可，不要乱搞样式属性。

显然，这是一个相当老套的示例，但好处应该很明显 - 特别是在 JS 操作的上下文中。 您可以将 JS 与它必须修改的实际样式解耦，这既是维护和抽象的好处，而且还有一些附带好处，例如不直接设置非常高的特异性样式（CSS 无法覆盖）。

Answer 5

多年后为子孙后代写下这个答案。 上面的所有答案显然都没有听过面向对象 CSS 的严肃讨论。 当OP询问这是否是一个流行语时，这应该表明该表达涉及一个值得讨论的主题（比“面向对象是什么意思？”更重要）。

我相信面向对象 CSS 这个术语是由雅虎前端技术布道者 Nicole Sullivan 创造的，她为 Facebook 提供咨询，将他们的前端代码重构为更精简、更易于管理，并且随着时间的推移可以轻松扩展和修改。继续。 “面向对象”一词并不是指 CSS 本身的性质（本身），而是指一种编写 CSS 和受影响的标记的方法，这种方法有助于简洁性和可扩展性。

OO CSS 的一些示例原则包括：

• 避免使用 ID 作为选择器：对象是唯一的这一事实并不一定意味着其关键属性应该以覆盖所有其他属性的方式定义。
• 避免基于嵌套标记的长选择器：根据文档结构中的偶然位置定义元素的外观通常是逻辑错误，将其移动到新位置将迫使您重新编写选择器。 与前面提到的一样，这种糟糕的做法也导致条件覆盖或扩展需要在选择器中提供额外的强度和特异性，而这几乎没有帮助。
• 使用非语义标记创建具有不同表示目的的元素，而不是尝试将单个元素外观的所有细节重载到一条规则中。 这会减少 CSS 的冗长。

OOCSS 的最终目标是 DRY。 当您本质上是在创建类似事物的变体时，您不应该编写数千行 CSS。

Nicole 给出了一些精彩演讲 - 她还写了几篇文章，扩展了一些有用的技术来使用和不良做法 要避免。

“OOCSS”也是她编写的框架的名称，该框架为可扩展 CSS 布局提供了一些样板代码。 这个框架为何如此优秀（网格模块 是我几乎在任何地方都使用的东西）从代码本身来看并不完全是不言而喻的，阅读她的博客文章背后的想法肯定会有助于更好地使用它和 CSS。

Answer 6

我已经让 OOCSS 和 BEM 命名约定感到尴尬很长一段时间了，并且永远不会回头。 对于那些声称这只是“吸引人的流行词”或“CSS 已经做到了这一点”的人来说，他们不了解使用这两种方法编写 css 的潜力。

让我们看一下最简单的对象，一个带有链接的列表。 它有许多不同的风格：

1. 菜单

2. 工具栏

3. 选项卡

4. 面板（引导程序）

OOCSS，我们找到每个对象的共同属性并创建一个基础对象。 我通常称之为导航。

/*  Nav
    =================================================*/

    /*  B
        ---------------------------------------------*/

        .nav
        {
            margin-left:            0;

            padding-left:           0;

            list-style:             none;
        }

    /*  E
        ---------------------------------------------*/

        .nav__item
        {
            float:                  left;
        }

        .nav__link
        {
            display:                block;

            color:                  inherit;

            text-decoration:        none;
        }

    /*  M
        ---------------------------------------------*/

        .nav--right
        {
            float:                  right;
        }

        .nav--stack .nav__item
        {
            float:                  none;
        }

您会注意到一些事情：

1. Nav 是应用于块元素的基础对象

2. 子元素以 nav_ 为前缀

   >

3. 修饰符以 nav-- 为前缀

4. 修饰符是更改行为的选项。 例如 --right 使导航向右浮动。

一旦我确定了基础对象，我就创建可以改变对象外观的皮肤。 这会将其变成工具栏、选项卡等。微软在其手机上提供了 Pivot 选项卡。 现在创建 fpr 皮肤更容易了。

/*  Nav
    =================================================*/

    /*  E
        ---------------------------------------------*/

        .pivot .nav__item
        {
            margin-left:            24px;

            color:                  #aaa;

            font-size:          36px;
        }

        .pivot .nav__item--active, .pivot .nav__item:hover
        {
            color:                  #000;
        }

要使用此对象和皮肤，您可以写

<ul class="pivot nav">

   <li class="nav__item">

        <a class="nav__link"> Item 1 </a>

    </li>

   <li class="nav__item">

        <a class="nav__link"> Item 2 </a>

    </li>

</ul>

为 由于其位置独立，您也可以将其写为

<nav class="pivot nav">

   <div class="nav__item">

        <a class="nav__link"> Item 1 </a>

    </li>

   <div class="nav__item">

        <a class="nav__link"> Item 2 </a>

    </div>

</nav>

最终，您将容器与皮肤分离。 我建议从 Nicole Sullivans Media Object 开始较小的工作。 查看 Twiter Bootstrap 和 Inuit.css 以获得更多灵感。

Answer 7

“面向对象的 CSS”这个术语是用词不当。

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

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

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

Answer 8

CSS 在很多方面与 OO 语言相似：编写

p { color: red }
p span { color: blue }

并且本质上具有继承性。 这里有一个更复杂的例子，让 terrier 扩展dog 扩展动物类：

.animal { font-weight:bold; color: blue; } 
.dog:before, .terrier:before { content: "GRRR"; }
.animal, .dog, .terrier { color: brown } 

现在你可以以面向对象的方式使用animal、dog 和terrier 类。

重要的是要记住，CSS 非常擅长解决它的目的：以透明的方式指定元素的样式。 如果有更多的 OO 概念会更好吗？ 我不知道。 假设有人说： CSS 文件如果看起来像这样会更简单：

@class dog @derives_from animal /* the syntax i just invented */
@class terrier @derives_from dog

.animal { font-weight:bold; color: blue; } 
.dog:before { content: "GRRR"; }
.terrier { color: brown } 

这看起来确实更简单，但更简单的解决方案是删除 @class 内容，同时将 'dog' 添加到任何 'terrier' 和 'animal' 到任何 'dog ' 服务器端（简单的替换语句）或使用 javascript。

CSS 最好的一点是它很简单并且很容易回退，这意味着浏览器不需要解释他们不理解的 CSS，并且一切都可以很好地进行。 由于您必须打破与主要新 CSS 结构的向后兼容性，我认为这使得面向对象的 CSS 更像是一个流行语。

Answer 9

它确实是那些有争议的事情之一，比如表与 div 等。

在我看来，有很多开发人员对 OO 如此根深蒂固，以至于他们试图将它粘在所有东西上，首先是 Javascript，现在是 CSS。 别误会我的意思 JavaScript 也有面向对象的元素，但我离题了。

由于 CSS 本身已经是一个流行词（所有雇主都想要 Web 2.0 CSS 方法），因此许多新开发人员正在发现它。 这并不是一件坏事，但是作为开发人员，他们做了他们最擅长的事情并尝试改进 CSS。 在开发人员看来（我是一名开发人员），根据 OO 原则组织 CSS 是非常有意义的 - 因此成为了新的流行词。

最终我想说的是，OO CSS 只是某些人采用的一种方法，因为它看起来更合乎逻辑。 如果您正在编写将由开发人员维护的 CSS，那么这种方法将非常适合。 这实际上取决于你如何编写 CSS 和你自己的个人风格...

就我个人而言，我并不关心人们如何编写他们的 CSS - 如果由我来维护它，Firebug 无论如何都会使这项工作变得微不足道。

Answer 10

我相信这没什么大不了的。

OOCSS 面向对象的级联样式表

它减少了一遍又一遍重复的代码，您可以为foocontainer设置一次全局CSS并在任何地方重复使用，具有 header body 和 footer 的自定义样式。

<div class="foocontainer header"> Your header </div> <!-- two classes -->
<div class="foocontainer body"> Your body </div>  <!-- two classes -->
<div class="foocontainer footer> Some footer </div> <!-- two classes -->

---

BEM Block--Element__Modifier

它使代码易于阅读，但编写起来很难看，并且您可以轻松识别孩子及其父母。

<div class="foocontainer--header"> Your header </div> <!-- one class -->
<div class="foocontainer--body"> Your body </div> <!-- one class -->
<div class="foocontainer--footer> Some footer </div> <!-- one class -->