大家都知道规范灵活的代码布局对提升程序员开发和后期维护效率至关重要,因为css同一元素可能被不同偏重度的选择器命中,相同元素不同的选择器表达式的样式冲突导致的显示异常,再加上不规范的代码,经常让前端代码开发、维护和调试变得苦不堪言,以下是笔者短暂前端开发工作中总结的一些CSS代码规划心得。

  个人认为规范的CSS样式文件可以分为三部分,依次如下:

1、CSS重置代码,即/*css reset*/这部分代码主要是用于解决各大主流浏览器默认css属性不一致的。因为CSS的标签元素众多且在chrome,safary等浏览器中的默认属性样式多样,这一部分主要是通过统一定义他们的默认样式以产生统一的显示效果;
 
2、中间部分是/*global css*/即通常所说的页面公用样式,通常是一个网站中不同页面或者说模块间相同的可以共用的样式,例如统一的页面头部和尾部;
 
3、第三部分就是各个模块或者说页面自己的个性样式。
 
以上三部分既可以独立为三个文件也可以置于一个css文件的不同部分,笔者通常更倾向于前者。