OOCSS(样式和结构的分离与容器和内容的分离)

神马是OOCSS

简言之：就是面向对象的CSS【Object Oriented CSS】，和大多OO编程语言的类似，都是提倡高复用【抽离公共属性，给私有增加特定属性；

这种东东在很早之前就有提倡使用了。从各种栅格布局的写法上更能看到这种写法；
至于为什么又拿出来讲，是因为前端组件化开发已经成为趋势，OOCSS的理念不谋而合，会火起来的；

---

使用面向对象的CSS的理由

• CSS样式变得更小，高复用，容易维护；
• 更容易改变网站某一区域的代码或者整体布局

---

OO CSS 的作用和注意事项

1. 不要直接定义子结点，应该把共性声明到父类
2. 结构和皮肤分离
3. 容器和内容相分离
4. 抽象出可重用的元素，建立好组件库，在组件库内寻找可用的元素组装页面
5. 往你想要拓展的对象本身增加class而不是他的父结点。
6. 对象应该保持独立性
7. 避免使用ID选择器

Demo?

http://oocss.org/

看这个网站的基础理论及源码【打开调试界面】，这是最基础的demo了，，没有多余的代码；

如图

---

总结

• 小项目用OOCSS的理念来写，前期需要准备的时间较多，你要考虑所有复用类，构建组件库，这是很耗费时间的,看情况来用吧；
• 大中型项目用OOCSS来写，是很好的，前期花费时间多点，但是对于中后期的维护来说，是非常实在的；