Question

修改：由于Kobi对此StackOverflow Question的评论很好，我修改了以下问题：

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

是否有任何生产站点使用框架~~面向对象的CSS~~ ？

Answer 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较少，我个人认为这更容易阅读。但我想在一天结束时，一切都取决于个人偏好和编码风格：）

Answer 2

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

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

Answer 3

你不应该在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上下载她的例子

Answer 4

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

如果沿着这条路走下去，我会提出3条建议。

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

有人使用Nicole Sullivan的面向对象的CSS框架吗？

4 个答案: