CSS

学习OOCSS理论

学习OOCSS理论

Posted by wang chong on May 16, 2019

OOCSS

OOCSS也叫面向对象的CSS。在传统的网站开发过程中,众多的开发者忽略了CSS的表现,都认为它太过简单,是一种机械性的工作,把更多的精力放在了JavaScript的性能或者其他方面。但是随着项目的工程越来越大,CSS样式文件也逐渐增多,很容易就出现了CSS胡乱堆积的情况,这个时候就必须要使用一种管理CSS的方式来管理样式。OOCSS就是一种解决方案。

在面向对象程序设计中,每一个类必须通过实例才能体现出价值,在HTML和CSS相互配合时,只有当HTML应用上CSS的时候,当前元素也就是父类的实例。OOCSS将页面可重用的元素抽象成一个类,用class加以描述,而与其对应的HTML就可以看成类的一个实例。

OOCSS的作用

  1. 加强代码复用以方便维护
  2. 减少CSS体积,能够通过父类减少代码的重复,重用代码。
  3. 提升渲染效率:父类先把轮廓显然,子类再逐步渲染。
  4. 组件库思想、栅格布局可共用、减少选择器、方便扩展。

OOCSS的注意事项

  1. 不要直接定义子节点,应把共性声明放在父类
  2. 结构与皮肤相分离
  3. 容器与内容相分离
  4. 抽象出可重用的元素,建好组件库,再组件库内寻找可用的元素组装页面。
  5. 往你想要扩展的对象本身增加class而不是他的父节点
  6. 对象应该保持独立性
  7. 避免使用ID选择器,权重太高,无法重用。
  8. 避免位置相关的样式
  9. 保证选择器相同的权重
  10. 类名 简短 清晰 语义化 OOCSS的名字并不影响HTML的语义化。

常用的样式库

  1. reset.css 是样式重写
  2. normalize.css 是样式补充
  3. neat.css 是对上面二者的结合。