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

神马是OOCSS

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

这种东东在很早之前就有提倡使用了。从各种栅格布局的写法上更能看到这种写法；

至于为什么又拿出来讲，是因为前端组件化开发已经成为趋势，OOCSS的理念不谋而合，会火起来的；

使用面向对象的CSS的理由

CSS样式变得更小，高复用，容易维护；

更容易改变网站某一区域的代码或者整体布局

OO CSS 的作用和注意事项

不要直接定义子结点，应该把共性声明到父类

结构和皮肤分离

容器和内容相分离

抽象出可重用的元素，建立好组件库，在组件库内寻找可用的元素组装页面

往你想要拓展的对象本身增加class而不是他的父结点。

对象应该保持独立性

避免使用ID选择器

Demo?

http://oocss.org/

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

如图

总结

小项目用OOCSS的理念来写，前期需要准备的时间较多，你要考虑所有复用类，构建组件库，这是很耗费时间的,看情况来用吧；

大中型项目用OOCSS来写，是很好的，前期花费时间多点，但是对于中后期的维护来说，是非常实在的；