当前位置：首页 → 问答吧 → 大型网站的CSS框架应该如何建立和维护

大型网站的CSS框架应该如何建立和维护

时间：2009-05-04

来源：互联网

蓝色中有没有哪位高手能指点一下?像淘宝 alibaba.com 有啊这类大型网站都是如何规划css的 ?
看过一个分析土豆网前端的文章虽然写得不错也很具体但应用到自己的网站项目上还是有一点困难
到底如何做才能在可维护性标准性高效这几个重要方面做到平衡呢?
这个问题一起很困扰我希望大家一起讨论讨论

作者: samantha808 发布时间: 2009-05-04

这个看个人习惯吧. 自己怎么维护起来方便怎么写

个人看法: 公用的单独写样式
颜色控制可以单独写
整体的框架也可以单独写

作者: chirsjie 发布时间: 2009-05-04

恩，这是个值得讨论的问题。
要详述的时间暂时没有，浅谈一下个人规划原则。
1. 尽少存在css文件数。
2. 样式分为：重用性元素定义（也包括a、input等标签和reset部分）、重用性模块（组件）定义、重用性布局方式定义、非重用性个性部分定义。这些放在一个样式表文件中。
3. 个性页面单独存放css。
4. （这点不是个人原则，是偷窥来的）首页等重要页面样式表直接内嵌在页面里面。^-^ 一是担心样式加载不成功，二是可以减少连接数...

作者: 14px 发布时间: 2009-05-04

严重同意楼上第四条

作者: madwolfcrazy 发布时间: 2009-05-04

三楼的说得很好。
有些人喜欢仿照OOP思想把样式分为很多个部分，乍一看似乎很方便管理，但在实际运营中后期维护会更麻烦。

作者: moondy 发布时间: 2009-05-04

忽略了图片的问题，图片的分布也是很头疼的一件事情。
基本上我赞同apple的分布方式。
global文件夹
-css
-js
-img
channel文件夹
-css
-js
-img

讨论分布合理性考量的标准无非是版本迭代的易维护性问题，通过这样的目录分布，可以独立某个频道或公共部分进行升级，而不用整个网站重新创建目录升级，图片文件也随着css的升级迁移到新的目录。

至于性能优化，不见得首页把css放进去就速度快，因为html文件内容更新快，变动大，缓存难，外部链接缓存很容易打开速度依然很快，html的加载也会快很对，见yahoo首页。图片按照频道和复用性进行合并。公共的合并为公共图片，频道的合并为频道图片，请求数按照页面为单位进行梳理。css，js文件合并可以通过程序来执行不需要人工处理，公共css可以按照功能区分，reset 基本类复用模块等等。

作者: greengnn 发布时间: 2009-05-05

其实一个大型网站分类楼上几个都说得不错，不过不管你怎么分要注意养成一个好习惯：就是把每个模块都写上注释。不是以后改版和维护是很困难的。

作者: liuzuq 发布时间: 2009-05-05

我个人觉得楼上说的方法是不错的

作者: andyzeqiang 发布时间: 2010-12-10