现在很多人会使用 CSS 框架进行快速建站。

　　那 CSS 框架是什么呢，它通常是一些 CSS 文件的集合，这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。

　　当然对于一些大型的项目，可能会很难照搬某些框架直接使用的，因为直接使用会带来一些限制或者冗余的问题。

　　但在 CSS 框架已经日趋成熟的今天，在我们设计项目架构、规范的时候，现时市面上一些优秀的框架也可以给我们提供很多可借鉴的地方。

　　本文主要从几个方面讨论 CSS 框架可以对我们项目的借鉴点：

　　1. 目录组织
　　2. CSS 规范
　　3. 图形
　　4. 应用方式
　　5. 小建议

　　1. 目录组织

　　在目录组织的分析上我们参考了 Bootstrap, Blueprint, Yui, Yaml 四个框架的组织方式

　　当使用一个框架时，我们一般会把所需框架本身的样式链到页面中，然后在它的基础上进行修改。所以框架本身所带的样式可以理解为基础样式。即我们平时所说的全局样式+组件样式。

　　可以看到，在目录架构上4个框架基本都是遵循基本样式+用户定义扩展样式的常规方式进行组织。

　　然而，如果按 Bootstrap 做法的话，可能会出现把不常用组件样式也包含在全局样式中一并引入，如果把组件也写在全局 CSS 中，最好确保该组件出现频率较高才引入，避免不必要的带宽浪费。

　　关于 hack：

　　对于针对低版本浏览器所写的 hack，对它的处理方式，Blueprint 和 Yaml 都是使用单独引入 hack 文件的形式进行处理，笔者也尝试过这样的做法。

　　个人觉得这种方式的好处是可以避免给高级浏览器带来冗余代码，而且通过条件判断引入 CSS 也不会给高级浏览器带来额外的请求。

　　这种方式比较适用于，高低级浏览器本来就刻意设计成有较大差别的情况下，即 hack 比较多的时候才使用。不然就为了十来行 hack 而多引入一个文件的话似乎也不太可取。

　　2. CSS 规范

　　a. 前缀

　　框架中公用模块都有前缀，分别有以下3个思想：

　　1. Yaml , Yui ：无论如何都是统一的标识开头，再加上改模块名称。

　　2. Bootstrap：直接模块名称，这方式需要定义关键字。公用模块是 button 都以 btn – 开头， image 则以 img- 开头。

　　3. Nec ：单字母开头来标识组件。

　　一般来说应用一个框架，我们先引入框架的样式，再在之上覆盖上自己的样式，所以可以把框架看作是我们的基础CSS。

　　我们可以借鉴框架的前缀规范来规划我们的基础 CSS 前缀，根据自己的项目实际情况采取不同的方案。

　　b. 类的划分

　　类的划分方式在框架中主要有2种标准，分别为：以