16

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

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

有没有人有任何进一步的见解可以使这种方法与众不同，因为它更可信，或者我应该把它作为一个提醒，以确保我正确地继承和级联我的类？

4

10 回答 10

10

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

  • 班级
  • 目的
  • 实例
  • 方法
  • 消息传递
  • 遗产
  • 抽象
  • 封装
  • 多态性
  • 解耦

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

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

于 2009-03-18T09:18:12.923 回答
5

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

尽管我认为其中一些想法有点天真，因为它们往往会忘记“客户端会随其变化”的 Web 开发范式。

于 2009-03-18T08:53:38.910 回答
4

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

当我阅读它时，我认为它是 OO 的说法实际上减慢了我对它的真正含义的理解。

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

所以，伟大的概念，需要重新命名。最大的 CSS！给 CSS 供电！CSS重生！CSS平方！CSS 总理！类似的东西。

于 2009-03-19T11:16:05.533 回答
3

我已经说了很多年了。

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

从对象角度考虑 CSS 的美妙之处在于，开始“投射”标记元素变得非常简单。需要那个 div 突然变成 INotRenderedAnymore 吗？让 JS 扩展它的 class 属性来匹配.removed，不要乱用样式属性。

显然这是一个相当陈词滥调的例子，但好处应该是显而易见的——尤其是在 JS 操作的上下文中。您可以将 JS 与其必须修改的实际样式解耦，这既是维护和抽象的好处，也有附带好处，例如不直接设置非常高特异性的样式（CSS 无法覆盖）。

于 2009-03-18T09:04:25.140 回答
3

多年后为后代写下这个答案。上面所有的答案显然从未听过关于面向对象 CSS 的严肃讨论。当 OP 询问它是否是一个流行词时，这应该表明该表达式指的是一个值得讨论的主题（比“我们所说的面向对象是什么意思？”）。

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

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

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

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

Nicole 就这个主题做了一些很好的演讲——她还写了几篇文章，扩展了一些有用的技术，以及要避免的不良做法。

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

于 2012-08-30T13:03:51.027 回答
3

我一直在为 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 媒体对象开始。查看 Twiter Bootstrap 和 Inuit.css 以获得更多灵感。

于 2013-08-06T16:13:15.320 回答
2

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

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

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

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

于 2013-03-25T21:01:38.183 回答
1

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 }

现在您可以以 OO 方式使用动物、狗和梗犬类。

重要的是要记住 CSS 非常适合解决它的问题：以透明的方式指定元素的样式。使用更多面向对象的概念会更好吗？我不知道。假设有人说：如果 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 更像是一个流行语。

于 2009-05-31T22:00:25.507 回答
0

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

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

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

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

就我个人而言，我不在乎人们如何编写他们的 CSS - 如果我需要维护它，无论如何，Firebug 都会让这项工作变得微不足道。

于 2009-03-18T09:03:53.877 回答
0

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

OOCSS 面向对象级联样式表

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

<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 -->
于 2016-08-11T04:51:29.380 回答