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(样式和结构的分离与容器和内容的分离)_第1张图片

总结

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

你可能感兴趣的:(css,面向对象,结构)