CSS框架分析与网站的CSS架构

框架（framework）是一个基本概念上的结构，用于去解决或者处理复杂的问题，是一种可复用的构架。

      我们对CSS框架这个词比较陌生，但对于JavaScript框架就比较熟悉了，比如jQuery

 

     但为什么js框架大红大紫而CSS框架确始终没有流行起来呢？甚至有人说“在我有限的视野里，还没见到可以真正可以称得上css框架的东东~”CSS框架没有被大众接受的一个重要原因是：

 

      js框架是基于逻辑的，js框架简化了逻辑中的繁琐细节，封装了存在兼容性的函数，提供了丰富的选择器、函数和插件，给开发者带来方便；

 

       而CSS框架是基于表现的，每个设计的风格或者同一个风格的繁简都完全不同，导致框架的可复用程度很小，比如960grids和blueprint，他们都是基于栅格的CSS框架，当设计并不是基于栅格的时候，他们就没有用武之地了。

        Elements CSS Framework只有当用户需要用到lightbox和特殊链接的时候，他才能发挥最大的作用。否则他只能提供reset.css

 

        YUI Grids CSS提供了一千多种布局，但是局限性依然明显，它的second-block被固定为160px,180px,300px三种，给设计制造了很大的局限性，结构嵌套过多，类名无语义，所以有人批判“与table布局无异”，呵呵，其实灵活性比table还是有很大的进步的，我记得08年的淘宝和有啊就是用的YUI Grids CSS，（淘宝2011版是无栅格的1000px宽度）但这种布局终究引起很大争议，缺陷过多，所以在YUI3中，雅虎团队去掉了grids.css，仍然保留着其他三个样式（reset，base，fonts）

 

CSS框架的缺点

综合以上的一些分析，我们总结了CSS框架的缺点

      1.嵌套过多，代码冗余，类名缺乏语义。这几乎是所有框架的通病。

      2.组件复用性少。可能一个布局要调用大量的CSS文件，而其中的大段的代码用不上。如果对有用的代码封装，封装的过程就极其麻烦，后期的可维护性也变差了

      3.学习成本高，可能需要设计师和开发人员同时学习。可是当设计师被“栅格”拴住了思想，开发人员被“框架”框住了手脚的时候，才是真正的杯具。

       我相信，以后会有一款真正的CSS框架出现，能完美解决上述问题，但是，现在还没有。有个同学甚至用js写了一个CSS框架，曲线救国，但是这个框架并不简单，执行效率如何也值得讨论。但是，

 

CSS框架并非一无是处

 

在网站的css架构中，我们依然要运用框架的思想架构整站CSS，几点注意事项：

      1.制订简洁而高效的reset.css

      2.功能模块的命名应该有良好语义并且全站统一

      3.Footer部分和header部分单独开发（一套或者多套）

      4.如果图标和按钮过多可以书写专门的样式icon.css和button.css

      5.在可重用、可扩展的基础上尽可能减少html代码的嵌套，以减少DOM树的渲染时间

      6.CSS选择器的层级不可过深，优化代码，减少重定义，CSS选择器的查询方式是用关键字查询keyselector，减少层级会提高查询效率；不用滤镜和CSS表达式（IE8已不支持CSS表达式）

     7.图片的合并要综合考虑服务器流量、HTTP请求数、可扩展性

     8.本地开发的html和css注释要良好（同时避免ie6注释bug）

     9.组件化开发不可划分过细，否则后期的维护量过大，良好的注释可以部分代替组件化