高质量的css代码-如何组织css

应用css的能力分为俩部分:

 

1.css的API,重点是如何应用应用css控制页面内的元素的样式;

 

2.css框架,重点是如何对css进行组织;

 

对于第一点,只有对错没有好坏之分,对于第二点是只有好坏之分没有对错.

 

css框架按功能分可以:控制字体的可以放在font.css文件里,控制颜色的可以放在color.css文件里.

 

推荐一种个人认为比较好的css组织方法:base.css+common.css+page.css.将网站内所有样式按照职能分成三大类:base common page ,

 

base层,提供CSSrest功能和粒度最小的通用类,这一层会被所有页面引用,力求精简通用.base层相当于建房子时打地基和准备砖块,base层相对稳定,基本上不需要维护.

 

common层,提供组件级的css类,与common相关的是样式化模块,我们把叶面元素分成一小块一块功能和样式相对独立的小"模块",重用度高的模块视为组件,尽量的从页面获取组件,放在common层.在建房子的时候不同的房子需要不同的门窗,门窗的位置也不同,但是门窗这个类是相通的.

 

page层,上面重用度不高的组件放在page层里,page层相当于建房子时候的墙画,每间房子都不同.

为了便于维护将所有的代码放在一个page.css文件里.

page层

/*首页*/
.test{}
.test2{}
/*关于我们*/
.test3{}
.test4{}
/*联系我们*/
.test5{}
.test6{}