如何组织CSS?


前端

零度逍遥

2014-08-26 01:15:15

前端工程师在开发一个单页面或者小网站的时候有可能不会在意CSS的组织问题,但如果要开发一个中大型的网站,就要好好的组织CSS文件,不然会增加维护成本,整个网站的结构也没条理性。

如何组织CSS?一般常用的方法是按功能划分,分为三大类:

1、base类

base类是css最底层的类,也就是通用原子类,具有高度可移植性、精简、通用,基本不需要维护。内容主要是一些CSS重置代码和常用的类,如.w100{width:100;},.fl{float:left;display:inline;}之类。

2.common类

common类位于中间,是组件类,也就是各个功能模块,把网站常用的元素拆分成各个复用性很高的小模块,注意的是最好由一人负责,统一管理。

3.page类

page类位于最高,复用性最低,尽量分开写,或者分块写,写明注释。page类越简单越好,能用上述两者解决的尽量用上述两者。