有人使用 Nicole Sullivan 的面向对象 CSS 框架吗？ [关闭]答案

【问题标题】：Anyone Using Nicole Sullivan's Object Oriented CSS Framework? [closed]有人使用 Nicole Sullivan 的面向对象 CSS 框架吗？ [关闭]
【发布时间】：2009-06-17 05:36:40
【问题描述】：

编辑：由于 Kobi 对 StackOverflow Question 的出色评论，我修改了以下问题：

有没有人尝试过 Nicole Sullivan 的 Object-Oriented CSS 框架~~或他们自己的一个~~？如果有，有什么优点/缺点？

有没有使用框架~~面向对象的CSS~~的生产站点？

【问题讨论】：

你见过stackoverflow.com/questions/657407/… 吗？
现在有一个流行语来形容 CSS 的自然部分？这不是任何网站上的最佳实践吗？这就像 60 年代每个程序员最终发明了链表一样。
感谢 cmets 伙计们。

标签： css oocss

【解决方案1】：

我在大多数样式表中都使用 OOCSS 和普通 CSS。我认为使用 OOCSS 来设计排版样式是没有意义的，但是对于列、框和按钮之类的东西，我认为它确实有意义，并且它确实有助于（在我看来）使代码更简单。

使用一个相当做作（而且很糟糕 - 类应该描述功能，而不是形式）的示例：

使用 OOCSS

a.button {display: block; background-color: red;}
a.border {border: 1px solid orange;}

<a class="button border" href="#">My bordered button</a>
<a class="button" href="#">My normal button</a>

使用普通的 CSS

a.button_and_border {display: block; background-color: red; border: 1px solid orange;}
a.button_no_border  {display: block; background-color: red;}

<a class="button_and_border" href="#">My bordered button</a>
<a class="button_no_border" href="#">My normal button</a>

如您所见，OO 示例中的 CSS 较少，我个人认为它更易于阅读。但我想归根结底，这完全取决于个人喜好和编码风格:)

【讨论】：

【解决方案2】：

OOCSS 框架并没有解决一些由它自己的原则定义的问题。 OOCSS 仍然包含冗余，并且通过将组件的组合移动到 DOM 中，将其内容耦合回表示。

OOCSS 确实做出了一些好的设计决策，应该鼓励用户以一致的方式维护他们的 CSS。这是一件好事。但是缺少随附的文档意味着如果它不能完全满足您的需求，您必须对其进行逆向工程。这个过程是不可靠的，所以你可能会回到你开始的地方......使用混乱的 CSS。

【讨论】：

【解决方案3】：

您不应该在 oocss 中指定标签，这是她提出的陷阱之一，因此您可以在任何其他标签上使用 .button，然后扩展该新标签..eg.

<button class="button">works on this</button>
<a class="button">works on this also</a>
<input type="submit" class="button" value="and this too"/>

在 css 中指定 a.button 意味着如果你想在另一个标签上使用它，你必须再次在 css 中重复它。重点是不要重复你的风格并避免冗余.. 你应该在github上下载她的例子

【讨论】：

【解决方案4】：

我正在使用它并且喜欢它。我所在的大学使用丰富的 Intranet Web 应用程序，这些应用程序使用我创建的 list {} 对象。它水平和垂直排列链接，但有“扩展类”（皮肤）将它们转换为标题栏、菜单、工具栏、选项卡、手风琴和按钮组。 List {} 对象不包含颜色或边框，只有一个 clearfix 和一些修饰符。实际外观存储在单独的类中。我也使用预处理器来

如果你走这条路，我会提出 3 条建议。

使用 B.E.M（块/元素/修饰符）命名约定
考虑基本的乐高积木并使用使用类来扩展它们。
使用LESS或SASS分离出外观

【讨论】：