我刚刚发现这个有趣的演示 http://www.slideshare.net/stubbornella/object-oriented-css?type=presentation关于“面向对象CSS”的概念。这似乎是一个好主意,但演示文稿相当简短,并且没有给出很多示例。
我的问题:
- 这个概念相关吗?
- OOCSS 有什么好处?
- 你能给我提供“面向对象CSS”的复杂例子吗?
也许,你认为这个概念并不重要
相关吗?
我认为是的,它基本上是为 CSS 作者使用的方法命名,与创建样式指南非常相似。有用吗?是的。继承别人的 OOCSS 工作容易吗?可能不会。
OOCSS 有什么好处?
抽象某个组件的样式属性始终有利于整个站点的样式一致性。假设您想要更改组件的边框样式以获得全新的外观:您通常会更改有关边框样式主样式的几行。
一个例子
我创建了一个关于我们网络应用程序中所有“小部件”的 UI 开发人员样式指南(或样式词汇)。每个小部件将根据其预期内容进行分类。每个小部件可以有任意数量的预定义框样式、背景样式。每个小部件还可以根据其所在的父元素来布置不同的内容。
这相当于代码:<div class="free bg_neutral form_search">
用于每个包装器/容器,每个类分别是:“盒子样式、背景样式、内容”。
然后,处理 HTML/视图的开发人员可以轻松切换任何预定义样式并用更合适的样式替换它们。例如替换bg_neutral
with bg_gradient_fff_eee
改为渐变背景。
我认为我们节省了无数行 CSS 代码,因为我们可以在几个核心“小部件”上使用可互换的属性,而不是定义每个“小部件”的每个独特的化身。它还使跨浏览器修复变得更加容易,因为您可以独立处理“小部件”样式。 (大多数浏览器错误与框尺寸和位置/布局有关)
在我看来,更多的 UI 人员在设计和实现网站前端时需要进行 StyleGuide / Style Vocab 练习。创建网站上使用的视觉元素的一致性。一致的视觉效果通常会产生一致且高效的 CSS!
希望有帮助,
ND
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)