面向对象的 CSS答案

【问题标题】：Object oriented CSS面向对象的 CSS
【发布时间】：2011-09-15 13:18:52
【问题描述】：

我看了这个presentation about object oriented css，但我想我要么没有正确理解，要么不明白使用OO CSS的好处：

示例 HTML：

<div class="border-1 bg-2 color-1 font-1">
</div>

示例 CSS：

/* borders */
.border-1 { border: 1px solid red; }

/* backgrounds: */
.bg-2 { background: yellow; }

/* other sections */

我看到能够快速更改多个元素的样式的优势，例如，能够切换配色方案将非常有用。

但实际上，您正在定义 HTML 内部的样式/外观，或者至少是其中的一部分。当然，这比使用style 属性要好，因为您仍然可以为一组组交换样式。

关键是，您在 HTML 中定义样式组，但我了解到您应该在 HTML 中创建“逻辑”组（例如 class="nav-item" / class="btn submit-btn"）并且 CSS 完全应用样式和从“风格”的角度定义哪些元素属于一起（例如.nav-item, .submit-btn { background: red; }）。

也许我完全误解了这个概念。但是，我仍然不知道构建 CSS 的好方法。

【问题讨论】：

标签： html css oop oocss

【解决方案1】：

CSS 不是面向对象的。我的建议是忘记你读过的关于“面向对象的 CSS”的内容，而是专注于你试图解决的 CSS 问题。如果它们是为了让 CSS 更易于编写、阅读和维护，或获得更多功能（如 CSS 变量），我认为 Less 或 Sass 将更适合您的需求。

像“面向对象的 CSS”所建议的那样使用 CSS 只会导致糟糕的、非语义的和无意义的 CSS，从长远来看，这些 CSS 并不比“普通”的 CSS 更容易维护。 id 和 class 都应该有 semantic and meaningful names，因此在我看来，使用允许您编写语义 CSS（描述意图而不是表示）的框架要好得多。

【讨论】：

@madr，你试过Less 或Sass 吗？与试图将面向对象硬塞到现在和永远不会是面向对象的东西中相比，它们是解决问题的好方法。
@asbjomu 因为没有理由不这样做，所以我将预处理器与 OOCSS 结合起来，以充分利用它们。我的团队对这份工作协议感到非常满意。
@AsbjørnUlsberg，谈到我的经验，对于一个不了解 OOCSS 的 UI 开发人员迁移到 scss/sass 来说，这将没有什么好处，主要原因是 OOCSS 让开发人员思考何时他是否应该将 CSS 的某个部分抽象为一个独立的组件，并且如果您作为 CSS 开发人员不问自己这个问题，那么转向 SCSS 对这个人没有任何好处！仅这个原因就可以节省大量的代码膨胀！

【解决方案2】：

这更像是一种“名称删除”，一种实际的方法。您显示的代码通常是贬义的，称为“enterprise css”，没有任何借口。

此外，元素上有多个类实际上会损害性能。

我建议您在制作 CSS 时遵守Mozilla's guidelines，这对其他浏览器也同样适用。并为 IE6、7 和 8 制作专用的 .css 文件。

【讨论】：

请参阅一个部分，它告诉多个类被认为是不良性能。使用冗长且不必要的复杂 CSS 选择器比使用多个类更糟糕。 stubbornella.org/content/2009/03/27/…
Avoid descendent selector, IDs, element refs, !important. Use CSS Lint and CSS grids。这是 OOCSS 吗？好的。美好的。没有错。相当普遍的智慧。但是“面向对象”部分在哪里？ 编程技术可能包括数据抽象、封装、消息传递、模块化、多态性和继承等特性。 (c) wiki 你应该如何在 CSS 中封装任何东西？ .. CSS 甚至没有变量，<style scoped> 远未准备好生产（即使有 shim）。

【解决方案3】：

这个想法是在许多元素上重用相同的 css 类。这既节省了编写 CSS 也节省了维护 CSS。所以不用定义 .create-button .cancel-button .create-and-new 按钮，你只需要一个 .button 来定义填充，size，background，color，line-height，font-size，@987654 和 3 font-weight。还有一些针对不同按钮样式的非常小的类，例如更改 color 或 font-size

我仍然经常使用的合适的 oocss 项目可以在这里找到：https://github.com/stubbornella/oocss/wiki

但是是的，您应该少看一下，它结合了在具有正确类名的多个元素上重用相同 css 属性的简便性。

【讨论】：

【解决方案4】：

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

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

进一步阅读：

【讨论】：