最近几周自己给自己加班，一个项目的整体CSS架构重新布置了一遍。虽然消耗了时间，但想到以后维护的人无论是别人还是自己都能更快写出好的代码，更方便找到需要的地方，修改组件的时候不困惑，或者看到代码的时候会心一笑，心里就觉得很值得。

第一次“升级”

第一次升级其实是跟随着快速上升的电梯，获得了提升，我本身没有做什么工作。QQ空间从v5升级到v6，有很多地方都获得了巨大的提升，无论是对用户的性能体验提升，还是对我们开发者本身的方便性的提升。最重要的一个工具就是CSSGaga，是一个大牛同事yt写的软件，改变我们整组人的工作习惯，也奠定了整个v6前端文件（html/css/img/slice）架构。QQ空间包含很多项目，我负责其中几个，这次提到的升级项目是其中一个。

新的前端文件架构对开发者非常友好，举例而言： DRY原则是说同样的代码只应该存在一份，Don’t Repeat Yourself。如果一份代码在物理位置上保存在了n个路径上，那么修改的时候，如何同步修改这么多文件就是一个问题；如果几行代码保存在n份文件中，那么如何同步修改这些文件中的这几行代码，就是一个问题。所以一个特性或者组件应该只有一份代码中出现，或者说就是一个文件，这是理想的情况。所以项目中应该有很多小颗粒的CSS文件，这种颗粒文件就以qz_前缀命名：

• qz_a.css
• qz_b.css
• qz_c.css

还有一些所有项目都用到文件，以core_前缀开头：

• core_reset.css
• core_a.css
• core_b.css

对于前端开发来说浏览器的HTTP请求数是非常重要的一个概念，我们要尽可能的减少HTTP请求数避免阻塞。而使用link的方式引入这些文件的话，就有很多HTTP请求了：

proj.html:

<link href=”core_reset.css” type=”text/css” rel=”stylesheet”>

<link href=”core_a.css” type=”text/css” rel=”stylesheet”>

<link href=”core_b.css” type=”text/css” rel=”stylesheet”>

<link href=”qz_a.css” type=”text/css” rel=”stylesheet”>

<link href=”qz_b.css” type=”text/css” rel=”stylesheet”>

<link href=”qz_c.css” type=”text/css” rel=”stylesheet”>

<link href=”proj.css” type=”text/css” rel=”stylesheet”>

如何减少呢？

proj.html:

<link href=”proj.css” type=”text/css” rel=”stylesheet”>

proj.css:

@import url(“core_reset.css”);