【问题标题】：Object oriented CSS: should it matter? [closed]面向对象的 CSS：重要吗？ [关闭]
【发布时间】：2010-10-12 06:03:59
【问题描述】：

我刚刚找到了this interesting presentation 关于“面向对象的 CSS”的概念。这似乎是个好主意，但演示文稿很短，没有提供很多示例。

我的问题：

这个概念是否相关？
OOCSS 有什么好处？
您能否为我提供“面向对象的 CSS”的复杂示例？

也许，你认为这个概念无关紧要

为什么？
您改用哪种工作流程（和规则）？

【问题讨论】：

标签： css oop oocss

【解决方案1】：

我看不出这个概念有什么好处，因为当前的 CSS 定义在某种程度上已经是面向对象的，具有其级联、选择器、通配符等。

他们提到将容器从内容中分离出来，对我来说这正是 CSS 所做的。

【讨论】：

我同意。在我看来，“OOCSS”只是不是随意编写的 CSS。就像你可以用 OO 语言编写非面向对象的设计一样，你很容易弄乱创建 CSS 的基本理念。 OOCSS 似乎在说，“伙计们，我们不要再搞砸了。” +1
“我们不要再搞砸了，伙计们。”大声笑 - 我多年来一直在说 CSS 是面向对象的 :)

【解决方案2】：

幻灯片是一套很好的标准和指导方针。我一直在使用它们，在我的设计中寻找模式和重复，然后将它们分解为组件。

导航、面板、网格、中继器、卡片等。这些都是我为每个站点设计的常用组件。

我还有用于实用程序、页面和内容的单独 CSS 文件。 Utilities 存储我的 clearfix 或 margin normalizer 之类的东西，Page 存储整个站点布局（页眉、页脚、主要），而 Content 是用于站点范围内的标题、段落、链接、列表等的通用规则集。

【讨论】：

【解决方案3】：

“面向对象”在这里有点用词不当，至少在严格意义上是这样。但他提出的设计指南是合理且有用的，并且在一定程度上缓解了 CSS 标准的“破碎性”。

他指出的问题 - 脆弱的设计、大文件、低可维护性等等，都是标准太松散、太面向特定并且基于不再有效的原始设计目标的结果。他正确地观察到，成功的设计需要头脑清醒和纪律严明。

【讨论】：

【解决方案4】：

听起来像是流行语跟我说话。正如 John Rasch 所说 - CSS 已经有点面向对象了。

【讨论】：

【解决方案5】：

在相关说明中，您可能需要查看compass 样式表框架。另请参阅primer。它看起来很有趣，虽然我还没有机会在项目中使用它。

【讨论】：

【解决方案6】：

OOCSS 有什么好处？

抽象某个组件的样式属性总是有利于整个站点的样式一致性。假设您想更改组件的边框样式以获得全新的外观：您通常会更改几行与边框样式主样式有关的内容。

一个例子

我针对我们网络应用程序中的所有“小部件”创建了一个 UI 开发人员样式指南（或样式词汇表）。每个小部件将根据其预期内容进行分类。每个小部件可以有任意数量的预定义框样式、背景样式。每个小部件还可以根据其所在的父元素对其内容进行不同的布局。

这相当于代码：<div class="free bg_neutral form_search"> 用于每个包装器/容器，每个类分别为：“框样式、背景样式、内容”。处理 HTML / 视图的开发人员可以轻松切换任何预定义样式并用更合适的样式替换它们。例如将 bg_neutral 替换为 bg_gradient_fff_eee 以获得渐变背景。

我认为我们节省了无数行 CSS 代码，因为我们可以在几个核心“小部件”上使用可互换的属性，而不是定义每个“小部件”的每一个独特的化身。它还使跨浏览器修复变得更加容易，因为您可以独立处理“小部件”样式。（大多数浏览器错误与框尺寸和位置/布局有关）

在我看来，更多的 UI 人员在设计和实现其网站的前端时需要通过 StyleGuide / Style Vocab 练习。在网站上使用的视觉元素中创建一致性。一致的视觉效果通常会产生一致且高效的 CSS！

希望对您有所帮助，无

【讨论】：

很好的例子，除了 bg_gradient_fff_eee 类名。如果您决定更改渐变颜色，我更喜欢与视觉效果不太相关的东西。或者，这就是 OOCSS 的意思吗？

【解决方案7】：

我希望喜欢在 css 中看到某种形式的继承。完蛋了哦？这可能是矫枉过正，但继承会成倍地缩小我的样式表的大小。

【讨论】：

【解决方案8】：

问题中链接的演示文稿由 Yahoo 的性能工程师 Nicole Sullivan 提供。

在 Yahoo Developer Network 网站上有一个 video of the original presentation，在 github 上有一个 repository for the OOCSS project。

【讨论】：

【解决方案9】：

好处是能够扩展对象并保持代码干爽和可读。那些反对它的人通常要么 a) 讨厌这个名字，要么 b) 从未使用过它。这么说吧……

示例

每个网站都有不同类型的导航。您可以在标题正文中的侧边栏中进行导航。也许，您的页面上甚至还有标签或面包屑？您甚至可能需要一个用于页面上的富文本编辑器的工具栏。这就是 .nav 抽象发挥作用的地方。

.nav
{
    margin-bottom:              24px;

    margin-left:                0;

    padding-left:               0;

    list-style:                 none;
}

.nav--right
{
    float:                      right;
}

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

.nav__item
{
    float:                      left;
}

.nav__item--active .nav__link
{
    font-weight:                bold;
}

.nav__link
{
    display:                    block;

    color:                      inherit;

    text-decoration:            none;
}

.nav__link:hover
{
    text-decoration:            underline;
}

这与我的所有控件中出现的代码相同。现在，我所要做的就是为它创建一些皮肤。

侧边栏皮肤

.side .nav__item
{
    border-bottom:              1px dotted rgba(0, 0, 0, 0.2);
}

.side .nav__link
{
    padding:                    12px 0;
}

标签皮肤

.tabs
{
    border-bottom:              1px solid #aaa;
}

.tabs .nav__item
{
    margin-right:               8px;
}

.tabs .nav__item--active .nav__link
{
    margin-top:                 -2px;

    position:                   relative;

    border-bottom:              1px solid #fff;

    bottom:                     -1px;

    color:                      #000;
}

主菜单皮肤

.menu .nav__item--active .nav__link
{
    border-radius:              2px;

    color:                      #fff;

    background-color:           #007bc3;
}

.menu .nav__link
{
    padding:                    12px 8px;
}

放在一起

我所做的只是为类属性编写对象的名称和皮肤的名称。这包括两者的属性。

<ul class="side nav nav--stack">

      <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

 <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

 <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

不要惊慌看到 .nav_item 和 .nav_link。大多数使用 li's 和 a's 但我想让它独立标记。

【讨论】：

摆脱 BEM 语法，您的示例变得非常简单。查看我不久前创建的一个小演示，以演示如何使用 OOCSS / SMACSS 设计模式（现在也称为原子设计）进行导航，而无需使用所有复杂的 BEM 语法 --> github.com/jslegers/atomic-navigation

【解决方案10】：

正如 Tor Haugen 所指出的，“面向对象的 CSS”这个术语用词不当。

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

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

有关 OOCSS 的真实示例，请查看 Cascade Framework、Scally 和 InuitCSS 等框架。

进一步阅读：

【讨论】：

相关吗？

OOCSS 有什么好处？

一个例子

示例

侧边栏皮肤

标签皮肤

主菜单皮肤

放在一起