编辑：由于 Kobi 对这个StackOverflow Question的精彩评论，我修改了以下问题：
有没有人尝试过 Nicole Sullivan 的面向对象的 CSS框架或他们自己的一个? 如果是这样，有什么优点/缺点？
是否有使用该框架的生产站点面向对象的 CSS?
问问题
2456 次
4 回答
3
我在大多数样式表中都使用 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 较少，我个人觉得它更易于阅读。但我想归根结底，这完全取决于个人喜好和编码风格:)
于 2009-06-17T18:30:49.890 回答
3
OOCSS 框架并没有解决一些由它自己的原则定义的问题。OOCSS 仍然包含冗余，并且通过将组件的组合移动到 DOM 中，将其耦合内容回呈现。
OOCSS 确实做出了一些好的设计决策，应该鼓励用户以一致的方式维护他们的 CSS。这是一件好事。但是缺少随附的文档意味着如果它不能完全满足您的需求，您必须对其进行逆向工程。这个过程是不可靠的，所以你最终可能会回到你开始的地方......使用混乱的 CSS。
于 2011-01-03T04:33:14.183 回答
2
您不应该在 oocss 中指定标签，这是她提出的陷阱之一，因此您可以在任何其他标签上使用 .button ，然后扩展该新标签......例如。
<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上的例子
于 2010-09-13T23:26:16.217 回答
2
我正在使用它并喜欢它。我所在的大学使用丰富的 Intranet Web 应用程序，这些应用程序使用我创建的 list {} 对象。它水平和垂直排列链接，但具有“扩展类”（皮肤）将它们转换为标题栏、菜单、工具栏、选项卡、手风琴和按钮组。List {} 对象不包含颜色或边框，只有一个 clearfix 和一些修饰符。实际外观存储在单独的类中。我也使用预处理器
如果你走这条路，我会提出 3 条建议。
使用 BEM（块/元素/修饰符）命名约定
考虑基本的乐高积木并使用使用类来扩展它们。
使用 LESS 或 SASS 分离出外观
于 2013-02-10T02:59:50.703 回答