7

我看了这个关于面向对象 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 的好方法。

4

4 回答 4

7

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

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

于 2011-09-15T13:36:50.603 回答
3

这更像是一种“名称下降”，一种实际的方法。您展示的代码通常被贬义为“企业CSS ”，没有任何借口。

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

我建议您在制作 CSS 时遵守Mozilla 的指导方针，这也适用于其他浏览器。并为 IE6、7 和 8 制作带有 hack 的专用 .css 文件。

于 2011-09-15T14:10:19.453 回答
3

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

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

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

于 2011-09-15T17:02:38.440 回答
1

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

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

进一步阅读：

于 2016-01-14T02:05:27.040 回答