面向对象的CSS:它应该重要吗？

Question

我刚刚发现了关于"面向对象的CSS"概念的这个有趣的演示.这似乎是一个好主意,但演示文稿相当简短,并没有提供很多例子.

我的问题:

• 这个概念是否相关？
• OOCSS有什么好处？
• 你能为我提供"面向对象的CSS"的复杂例子吗？

也许,你认为这个概念并不重要

• 为什么？
• 您使用什么样的工作流程(和规则)？

Answer 1

它有关系吗？

我是这么认为的,它基本上是为CSS作者使用的方法命名,与创建样式指南的方式基本相同.它有用吗？是.是否容易继承其他人的OOCSS工作？可能不是.

OOCSS有哪些好处？

抽象某个组件的样式属性总是有利于整个站点的样式一致性.假设您想要更改组件的边框样式以获得全新的外观:您通常会更改有关边框样式主样式的几行.

一个例子

我创建了一个关于Web应用程序中所有"小部件"的UI开发人员风格指南(或样式词汇表).每个小部件将根据其预期内容进行分类.每个小部件可以具有任意数量的预定义框样式,背景样式.每个小部件也可以根据放置在哪个父元素的不同来布置其内容.

这类似于以下代码:<div class="free bg_neutral form_search">用于每个包装器/容器,每个类分别为:"Box Style,Background Style,Content".然后,处理HTML/Views的开发人员可以轻松切换出任何预定义的样式,并用更合适的样式替换它们.例如替换bg_neutral与bg_gradient_fff_eee一个梯度背景代替.

我认为我们保存了无数的CSS代码,因为我们可以在几个核心"小部件"上使用可互换的属性,而不是定义每个"小部件"的每个独特的化身.它还使跨浏览器修复变得更加容易,因为您可以独立处理"小部件"样式.(大多数浏览器错误与盒子尺寸和位置/布局有关)

在我看来,在设计和实现网站的前端时,更多UI用户需要通过StyleGuide/Style Vocab练习.在站点上使用的可视元素中创建一致性.一致的视觉效果通常会产生一致且高效的CSS!

希望有所帮助,nd

Answer 2

我没有看到这个概念有任何好处,因为CSS的当前定义已经在某种程度上面向对象已经有了它的级联,选择器,通配符等.

他们提到将容器与内容分开,这对我来说就是CSS的功能.

Answer 3

雅虎的性能工程师Nicole Sullivan给出了与问题相关的演示文稿.

Yahoo开发者网络站点上有一个原始演示文稿的视频,以及github上OOCSS项目的存储库.