[近期话题]如何合理的规划站点的CSS样式表

blank 楼主

站点CSS样式表日常组织中经常遇到的问题（引用 dushizhuma 文章《CSS样式表的规划与组织》中的一段）：

1：样式表文件里面的代码混乱，随着项目的进展，样式表里面的先有代码不敢做任何改变，因为连自己也不知道改了以后会给现有项目造成什么影响。更不敢删除。因为连自己都不知道此处的样式到底什么地方用到了。

2：样式表文件体积增大，一个页面即使没有用到多数的样式，但仍然只能引用所有的样式，导致页面的加载缓慢。

3：样式表文件里面的代码，就像意大利面条（为什么一定要像意大利的面条？），或者就像中国的兰州拉面。所有的选择器类型全部混在一起。甚至出现很多上下的重复和不一致。

4：其他的一些CSS导致的问题。

CSS样式表的规划，应该可以说是网站建立初期的一个比较基础而又重要的要点，那如何才能达到合理呢？？

希望所有的朋友能够一起加入到讨论中来，可以说经验，可以说设想，可以说理论……可以从微观的单个文件的某段讲起，也可以从宏观的整站所有样式表讲起……

PS：对于好的回帖，将不吝加分，基础分3分！对于灌水式回复或者言之无物者，删无赦！


附部分参考阅读：

《Andy Budd的样式指南》：http://www.cnblogs.com/JustinYoung/articles/763052.html
《70位专家谈CSS设计》：http://litianbai.spaces.live.com/blog/cns!c9293f4c30d23a7f!733.entry
《Master Stylesheet: The Most Useful CSS Technique》：http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/
《YUI （Grids CSS、Reset CSS、Fonts CSS）》：http://developer.yahoo.com/yui/

[ 本帖最后由 blank 于 2007-7-11 14:48 编辑 ]

faeng220

注释。。。。
　　　统一前缀。对于同一个ID的。

比如：我一个显示页脚的用一 DIV来表示，它的ID为tFoot
那么
CSS大概样子如下写，会更容易查找

/** 页脚 tFoot ***/ #tFoot{ } /***************/

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

tshjds

呵呵;这个话题不错;支持一下;
我一般写样式的时候都写上注释;很多通用的样式独立一个样式表;比如:建一个ALL.css;
其他的每个页面有自己的样式;
我习惯这样书写样式这个有的也是借鉴别人的书写方式;感觉很不错;就也学习了.这样写起来虽然比较忙烦了点;但是很规范找起来也方便很多;

1. body,a,strong,input,select,button,h1,h2,h3,h4,h5,h6,h7 {font:12px "Tahoma","宋体","Arial","QQ 328088873",sans-serif;}/*12px大，字体优先：Tahoma,然后:宋体,Arial.族科:sans-serif*/
   
2. html,body {height:100%;}/*设置浏览器高度为100%*/
   
3. body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 {padding:0;margin:0;}/*设置内外补丁为0*/
   
4. div,p {display:block;}/*所有div,p为块元素*/
   
5. ul,ol,dl {list-style:none;}/*所有项目符号显示无*/
   
6. img {border:0;}/*所有图片边框无*/
   
7. a {text-decoration:none;}/*所有链接无修饰[上,下划线,虚线...]*/
   
8. a:hover {text-decoration:underline;}/*所有链接鼠标放上时为下划线*/
   
9. button {cursor:pointer;}/*所有按钮鼠标放上时为手型标志*/
   
10. 
    
11. /* ================== 索引 ====================
    
12. 
    
13. #top .top_left ------------ 会员登陆
    
14. #top .top_right ----------- 分站入口
    
15. 
    
16. #nav ---------------------- 网站导航
    
17. 
    
18. ============== 自定义常用样式 ==================
    
19. .no ----------------------- 隐藏对象
    
20. .indent ------------------- 首行缩进
    
21. .ul_1 --------------------- 列表设置(红)
    
22. 
    
23. =================== 链接 ======================
    
24. a.a333 -------------------- 深灰#33333
    
25. 
    
26. a.a1 ---------------------- 初始有下划线，经过时消失
    
27. 
    
28. 
    
29. ================== 子链接 =====================
    
30. .b333 a ------------------- 深灰#33333
    
31. .b1 a --------------------- 初始有下划线，经过时消失
    
32. 
    
33. 
    
34. ============================================== */
    
35. 
    
36. /* 全局设置：修饰 */
    
37. body { text-align:center; color:#333; }
    
38. #centent { border:solid #7b7b7b; }
    
39. /* 布局 */
    
40. #centent { width:800px; margin:0 auto; text-align:left; border-width:0 1px; }
    
41. #nav,
    
42. #lm,
    
43. #sn,
    
44. #links,
    
45. #copy_right { clear:both; }
    
46. 
    
47. /* 自定义常用样式 */
    
48. .no { display:none; }
    
49. .indent { text-indent:2em; }
    
50. .ul_1 li { background:url("../i/all/017.gif") no-repeat 0 5px; height:21px; padding-left:8px; }
    
51. .ul_3 li a,
    
52. .ul_4 li a { font-size:14px; }
    
53. .line_180 { line-height:180%; }
    
54. 
    
55. 
    
56. a.a333 { color:#333; }
    
57. a.a666 { color:#666; }
    
58. a.aab0001 { color:#ab0001; }
    
59. 
    
60. a.a001bc0:hover { color:#ab0001; }
    
61. a.a1 { text-decoration:none; }
    
62. a.a1:hover { text-decoration:underline; }
    
63. 
    
64. 
    
65. .b333 a { color:#333; }
    
66. .b666 a { color:#666; }
    
67. 
    
68. .b1 a { text-decoration:none; }
    
69. .b1 a:hover { text-decoration:underline; }
    
70. .b2 a { text-decoration:underline; }
    
71. .b2 a:hover { text-decoration:none; }
    
72. 
    
73. 
    
74. /* 通用栏目：修饰 */
    
75. #top { border:solid #c2c2c2; background:#efefef; }
    
76. 
    
77. /* 布局 */
    
78. #top { min-width:802px; height:33px; border-width:0 0 1px; }
    
79. #top .top_left h2,
    
80. #top .top_right h2 { display:none; }

复制代码

[ 本帖最后由 tshjds 于 2007-7-11 13:07 编辑 ]

chyf1982

基本分几个样式。。
总体公共用的一个。
每个页面根据结构和表现的不同。
写一份单独的。
另外可以考虑用程序来选择加载与否)

greengnn

规划站点CSS属于开发模式的范畴，可以在开始的时候规划，也可以在最后完成之后整理。

基本组成：
1.公用css组件
全局css，公用css类，css模块组件
2.布局
页面的基本布局
3.主题
页面UI
4.hack
浏览器兼容
ie6 ie5 ie7之类的条件注释

书写规范：
命名可以使用中间“-”,"_"符号连接，如text-box,text-content,text_box，或者大小写“驼峰”式书写，textBox,textContent等。
注释很重要，注释可以分为三级，大类注释用于css块的划分，如header , container , footer,二类注释，大类下面的局部模块注释，三类注释一个选择符内注释，用于一些特殊效果的注释或者hack注释。
书写格式，可以采用横排缩进的方式，显示出层级关系。
css文件的分布，如果字节小的话，可以尽量压缩降低并发连接数，如果字节过大，可以分割，防止下载速度太慢，影响样式加载。这些就是具体问题具体对待了。比如搜索引擎和门户首页这种访问量极大的页面最好将css写入页面内部。

至于几个著名的CSS framworks的使用，需要谨慎，因为CSS库本身会很大。


以上是我的一些看法，希望大家积极讨论

z3333426

做好注释。

不过我CSS里面都没什么注释，
直接搜索的。

一般首页是改的最多的。首页的样式要单独出来。就算是共用的样式都得独立出来。

以前在asp开发的时候
所有的CSS都是一个文件夹下面
有一个共用的default.css 里面放共用的信息。比如td p body 分页效果 什么的

然后再有一个css专门放层自己的ID样式然后 @import default.css

现在在.net里面 每个主题也是独立的。

好处就是想改就改，想删就删，不会影响到其他的。但是样式表体积是大了点
但是加载不会缓慢。修改起来也不怎么麻烦。
唯一痛苦的就是换皮的时候要修改很多次。

<div id="***"><ul><li> -------

最好别定义这个ID下面的UL
<ul id="****">

碰到过很多这样的麻烦。
也就是别定义大容器里面的常用元素。。

类似PJ那种还是不错的，一段时间参考的就是PJ的样式分布。
伪类 单独一块。

以前项目还有打印的， 那打印又得独立一个出来 ......

其他的就习惯问题了。

[ 本帖最后由 z3333426 于 2007-7-11 14:34 编辑 ]

jdjia

1. 按照过程功能来划分
   
2. 1.reset all 重设所有标签属性,并定义重要标签属性. 定义全站风格、包括链接。
   
3. 2.commonality 设置全站中常用的CLASS，分页功能、HOT等。
   
4. 3.layout 框架布局用。支持全屏和定宽。
   
5. 4.form 处理表单用，包括表单出错等。
   
6. 5.tab room 全站TAB
   
7. 6.grid room 画块级格子用
   
8. 7.table room 处理全站表格用
   
9. 8.sidebar room 右边样式用
   
10. 9.blank 根据人民币的面值，可组合成自已想要的空白高度。
    
11. .......

复制代码

全部应用于kijiji.cn 已应用于listing页面。单个广告页。管理中心页等。首页还没有用。
一个CSS可以满足全站，包括首页，listing页面。单个广告页。管理中心页等。 大小约12K
例如：http://shanghai.kijiji.cn/a13468483.html


以下是部分代码:

1. /*reset all*****************************/
   
2.         * html {
   
3.           filter: expression(document.execCommand("BackgroundImageCache", false, true));
   
4.         }
   
5. 
   
6.         *{ margin:0; padding:0; list-style:none;}
   
7.         body{text-align:center; background:#FFF; font:12px/1.8 Verdana, Arial, "宋体";color:#666}
   
8.         img{border:none;}
   
9. 
   
10.         h1,h2,h3,h4,h5,h6,input,textarea{font-size:12px; color:#000}
    
11.         h1{font-size:16px;}
    
12.         h2{font-size:14px;}
    
13. 
    
14.         table{border-collapse:collapse;border-spacing:0;}
    
15.         fieldset{ border:none;}
    
16.         small{font-weight:normal; color:#666; font-size:12px;}
    
17.         address,em{font-style:normal;font-weight:normal;}
    
18.         address{border-left:5px solid #CCC; padding-left:8px; margin:5px 0;}
    
19.         caption{font-weight:bold; text-align:left;}
    
20.         strong{color:#000}
    
21.         form table{ margin:10px;}
    
22.         form table td{margin:10px;vertical-align: top; color:#000}
    
23.         img.imgBorder{ padding:2px; background:#FFF; border:1px solid #EBEBEB; margin:2px;}
    
24.         img.imgBlock{ display:block}
    
25. 
    
26. 
    
27.         a:link,a:visited{color:#000099;text-decoration:underline;}
    
28.         a:hover,a:active{color:#000;text-decoration:none;}       
    
29. /*commonality*****************************/
    
30.         .clear{clear:both; height:0; overflow:hidden}
    
31.         .hidden{display:none;}
    
32.         .left{float:left;}
    
33.         .right{float:right;}
    
34.         .grayBorder{padding:5px;border:1px solid #EBEBEB; margin-top:10px; clear:both;height:1%;}       
    
35.         .grayBg{padding:5px; background:#F5F5F5}
    
36. 
    
37.         .transverse li{display:inline;margin-right:5px;}       
    
38.         .transverse li a{white-space: nowrap;}
    
39.         .upright li{display:block;margin-right:0; float:none}       
    
40.        
    
41.         .pager li{display:inline; margin-right:5px;padding:0 2px;}
    
42.         .pager .on{color:#FF3300; }
    
43.         .hot,.hot a{color:#FF6600}
    
44.         .hotGreen,.hotGreen a{color:#7AC431}
    
45.         .paddingLeft30{ padding-left:30px}       
    
46. 
    
47.         .font12Px{ font-size:12px;}
    
48.         .font14Px{ font-size:14px; color:#000}       
    
49. /*layout*****************************/
    
50.         /*width 950px*/
    
51.         #wrapper{margin:0 auto; text-align:left;}               
    
52.         #header,#content{clear:both;text-align:left;width:950px; margin:0 auto; padding:0 8px;}
    
53.         #search,#footer{clear:both;}
    
54.        

复制代码

[ 本帖最后由 jdjia 于 2007-7-11 16:08 编辑 ]

crystal0624

我只做了些小商业网站的，所以经验也不是很多，贵在参与嘛！

单就小网站来说，我感觉划分明确也是重要的，我都是公共的用一个，首页用一个，分页用一个！

对于门户网站，我想应该画好结构图，然后再细分，写好文档，写清楚注释，这样也是为了走了之后，其它人可以马上接手网站。不用光熟悉css文件就用个大半天。

[ 本帖最后由 crystal0624 于 2007-7-11 14:35 编辑 ]

Satellite

css方面我不是权威，我从服务器缓存这方面来说一些css的使用体会
一般大型的网站都会设置服务器缓存 一般像css文件可能会设置成几个月 几天 几年的都有
这个时候会出现一个问题，就是万一你页面的结构变了，css文件你也更新了，但是在用户这边由于缓存的缘故，css文件并没有及时更新，这样页面就可能会乱。
这个时候就要注意了，一般来说，如果更改了页面结构，最好也更改一下引用的css文件名称，这样浏览器就不会从缓存里面读取css了，而是会去服务器上读最新的css。
这个问题有很多的解决方法，这里就不一一例举了。

crystal0624

网易就是把所有的css都放进页面中了，我想这么做的原因，可能就是怕楼上说的这种情况出现！

但是页面中的代码那么多会不会影响速度啊，到底是像网易那么做，还是引用样式？怎么办？

jskin

我一般有用三个样式文件：

1、布局文件：layout.css
2、主要文件：main.css
3、字体文件：font.css

不知这样写是否合理，感觉这样写使每个文件各负其职

layout.css里边包含些公共的内容

main.css里边主要是一些个性化的样式！

如有不合理之处还望指教！！！

[ 本帖最后由 jskin 于 2007-7-11 16:17 编辑 ]

261509559

基本的构成

项目开发的前期你一定要为自己制定一套样式表规划文档.并且传至团队人员查看.一定要有整体流畅的思路，功能可以随时加。我曾就犯过错没规划好就开始写，结果到中期发现很糟糕。

注释一定要随手注释....

1.基本样式 （写共用属性）
2.大局面的布局样式 （用于写整体大框架的布局如header nav wrap footer）
3.表单样式 （如果做过项目开发的人肯定清楚表单真是个繁琐而又简单的事.有很多复杂的样式要处理所以单独一个。）
4.页样式 （我用来放置同一个区域的所有模块样式，如：用户操作系统，里面有很多页，而没个页又有不同的样式布局，我就会把每个功能模块在CSS里注释写功能。）

如上是我基本的样式表组成结构，但实际开发中会遇到各种各样的问题，好比如这个站里有好多信息展示页，而这些信息展示页的形式都一样，无非是样式不一样，那么我就会在建立一个专门放置信息展示页的样式表。

命名起来我尽量的都是英文命名，为表现的更清晰话，命名我通常会用到下划线 如：列表信息 list_info (listinfo),当然有时候简单的拼音我就直接用，只要是清晰用起来就好.

无论怎么做 一定要有自己一套流畅的思路.

ps：忘说啥了，想起来在补.....

cssxp

1. 按照功能来划分
   
2. 1.设置公用的文本样式 typography.css，管理字体列表 大小行高 样式[粗斜]。『文本媒体』
   
3. 2.设置公用的链接样式 link.css，管理四种链接l v h a 『链接媒体』
   
4. 3.设置公用的布局样式 layout.css，这个省略 『布局代码』
   
5. 4.设置公用的广告样式 flash.css， 适用于『动画媒体』
   
6. 5.设置公用的图片样式 image.css ，适用于图片新闻内容『图片媒体』
   
7. 6.设置公用的视频样式 video.css， 适用于 播放器 播放 『视频音频』
   
8. 7.设置公用的其他样式 other.css， 适用于 未归类的媒体
   
9. 8.设置公用的CSS hack hack.css， 适用于浏览器bug

复制代码

如果是播客视频，电影网站，或者是博客相册，图片网站 一般对image.css 和 video.css要求就比较高，使用次数多。

通常情况下的普通网站 『文字』『链接』『广告』『布局』四类样式代码是必须的。
至于写成一个css文件还是四个css文件，那就仁者见仁智者见智了。

cssxp建议您使用搭积木的方式来管理！

团队协作 按照功能来划分的话，建议写成四个文件。

如果是个人的话，cssxp也建议您写成四个文件。
理由是：4个文件合成一个文件，然后用topstyle之类的整理压缩css文件，再发布。
1>节省体积
2>代码混淆拥挤让模仿者难以下手，当然dw有个整理代码功能可以轻松还原了。
3>源码在自己手中，而发布仅是精简代码

如果是一个文件拆分成四个的话，目前没有软件可以帮助您区别分类，或者是胜任此项工作。

介绍完按功能划分之后（针对全站所有页面），再介绍按页面划分（针对站点每种类型页面）

1. 按照页面类型来划分
   
2. 1.首页样式index.css   省略
   
3. 2.子页样式page.css    放置二级栏目样式，
   
4. 其中包括了混合『文字』『链接』『广告』『布局』样式
   
5. 3.文章样式article.css   放置文章内容样式，
   
6. 包括『文字』『图片』『视频』『广告』『布局』样式等等
   
7. 4.评论样式comment.css   评论页面样式，可以参考网易评论
   
8. 5.代码样式code.css     技术教程类的网站通常需要放置代码，参考csdn博客 blueidea
   
9. 6.演示样式demo.css    省略
   
10. 7.站点中其他类型的页面样式 other-page.css

复制代码

当然还有其他的情形，笔者才疏学浅，就等您来添加上去了。
按照页面来划分，一人专注一个|一类页面即可，就好像行政区域划分一样。

介绍完了按页面类型划分之后，下面开始介绍按照指定页面 | 专题页面 内的布局块来划分

1. 按布局来划分
   
2. 1.头部样式header.css   省略
   
3. 2.面包屑样式crumb.css   省略
   
4. 3.广告样式ad.css    省略
   
5. 4.左列样式left.css        （一行三列布局，很容易扩充成三行三列布局）
   
6. 5.中列样式middle.css    省略
   
7. 6.右列样式right.css     省略
   
8. 7.第一行样式 row1.css    （三行三列布局第一行样式）
   
9. 8.第二行样式 row2.css    （三行散列布局第二行交互样式altnate.css）
   
10. 8.第三行样式 row3.css    （三行散列布局第三行样式 可以同第一行，或者另起样式）
    
11. 9.友情链接样式 friendlink.css | blogroll.css 省略
    
12. 10.新闻公告样式 anounce.css   省略
    
13. 11.底部版权样式footer.css   省略
    
14. 12.页面中其他的区域块 unkown-zone.css

复制代码

1. 以上三中样式分类管理是按照
   
2. 一、全站『所有页面』 all page；
   
3. 二、某一类型页面『多个页面』category page；
   
4. 三、特定页面『一个页面』specific page。
   
5. 这三中范围来划分的了。

复制代码

体验css 提示您在设计css的时候先做好计划，看是要做全站的页面，还是某个专题页面了。根据不同的需求来选择不同的方式来管理。

tips:
1.搭积木『松耦合』的方式最为灵活多变，分开来写，最后发布上传的时候可以pack压缩一下。
2.好的设计与注释是密不可分的。
3.学会使用topstyle的style swapper “样式清道夫”功能来去除注释压缩代码
4.学会使用dreamweaver的“命令”>“套用源文件格式”来整理混乱的html & css代码

最后推荐一下cssxp的个人小站 体验css http://www.cssxp.net

cssxp

原帖由 crystal0624 于 2007-7-11 14:25 发表
网易就是把所有的css都放进页面中了，我想这么做的原因，可能就是怕楼上说的这种情况出现！

但是页面中的代码那么多会不会影响速度啊，到底是像网易那么做，还是引用样式？怎么办？

您可以使用 FF浏览器插件web developer查看一下网易首页的 Document Size

1. http://www.163.com/        26 KB (96 KB uncompressed)

复制代码

可以看的出来网易服务器使用了服务器端压缩的形式来传输html文档

再使用FF浏览器插件Firebug [Net]选项卡 查看一下网易首页请求信息

1. 82 requests               
   
2. 306 KB       
   
3. (0 b from cache)
   
4. 18.57s

复制代码

我们从性能上计算出访问网易首页平均的下载速度为 16.478KB/s       306 KB / 18.57
再看请求数82个 耗时 18.57s 平均每秒处理请求4.415个。 即0.226秒处理一个请求

假设打开网易首页第一个请求的文档是index.html  在226毫秒内网易服务器响应第一个请求
然后传输文档，26/16.478  耗时1.577秒。
总计费时1577+226 =1803 毫秒
也就是说1.8秒时间内打开了网易首页文档html，裸页。
如果在请求一个2KB大小的 css文件，那么加上226响应时间 + 100ms的下载时间，那么将要耗费2.1秒

疑问出来了，css文件是压缩了的还是未压缩的？

从服务器性能和网络传输两个方面来考虑
1. 假设css文件总计18K，下载时间要1秒。到底是压缩了的还是未压缩？压缩要消耗服务器端资源，降低性能，对于大网站来说是场噩梦
2. 不压缩，传输速度是一个问题，举例子来说 理论上96KB未压缩首页html按照16.478KB的下载速度要下5.8秒钟（实际上不能） 大文件压缩了比不压缩要好。
3. 如果是小文件18KB以内，以及不超过30KB的文本压不压缩还值得考究

以上理论未经压力测试，个人经验判断而已。 但这个结论是不可否认的
网络传输时间 受到 文件大小的影响 且成正比关系 [文件越大，即传输时间越长]

在回答css文件是否需要压缩这个问题之后，再讨论一下css文件是否需要从html中分离

假设我们通过站点css样式表分类管理之后，出现了四到五个样式表，方便计算取5来验证
之前我们计算得出了 本机从发送请求到 网易服务器响应请求的时间【以下简称“响应时间”】平均为226ms。

tis:这个也可以通过“开始”>“运行”> 输入“ping -t www.163.com >>c:\ping163.txt”查看响应时间  或者输入 “tracert www.163.com >>c:\tracert163.txt”查看通过那些路由访问网易及各个路由节点响应的时间，相加即可。

如果网易有5个样式表，总计体积大小为18KB，平均每个文件3.6KB
发送一个请求得到网易服务器的响应时间时间需要226ms。 5个请求就需要1130毫秒即1.13秒。
加上平均下载时间约1.092秒
那么总计耗时2.222秒。

虽然html 96KB中减去了18KB的样式文件，只有78KB，但是压缩后也应该是21.125KB   【计算方法 26 / 96 * 78】
也就是节省了5K大小，省去网络传输时间0.303秒 = 303毫秒。但是请求和传输5个18KB大小的样式表却花费了2222毫秒的时间

明显后者花费的时间是前者花费的时间 『2222 / 303』 = 7.33倍

cssxp小站的平均访客停留的时间大约在10秒钟以内。这个和大站点是不能比的。但是可以用这组数据来进行参考
对于一个站点用户等待了将近4秒钟的时间，还有6秒钟的时间是多么滴宝贵。


最后得出来的结论
一、网易首页将css放在html中可以有效避免裸页css naked出现
二、网易首页将css放在html中可以有效降低网络请求响应时间
三、网易首页将css放在html中可以有效减轻服务器压缩的负担
四、网易首页将css放在html中可以有降低网络传输消耗的时间
五、如果您的站点不能开启服务器压缩文本功能，可以尝试优化首页html文档大小控制在18KB以内，最大不超过30KB
六、如果您的站点可以开启服务器压缩，请不要尝试在服务器上压缩图片、视频或者音频。
七、此案例分析未经过Web服务器压力测试，不代表权威实验结果，仅作为理论参考。

cssxp's tips
一、不要盲目模仿大站，开启服务器端压缩功能 保守估计将消耗10%~20%的服务器性能
二、流量大的时候性能和速度谁重谁轻还请各位看官自己掂量一下。

降级服务器性能 -> 提升服务 = 提升服务成本
降低速度性能 -> 消耗的是用户成本 【宝贵的时间】

最后推荐一下cssxp的个人小站 体验css http://www.cssxp.net

[ 本帖最后由 cssxp 于 2007-7-11 17:14 编辑 ]

tshjds

其实我写的也挺好的嘛;没有鼓励鼓励伤心呀

dushizhuma

@tshjds
最终的发布版本尽量不要那么多注释。因为那会减缓css的加载速度。

还有，我个人感觉你的注释有点“过”了。

-----------------------------------------------------------------------------------------

如果项目很大。css的设计可以多人协同工作，但是一定要注意。
我们的做法是，通用样式，布局样式这样大的样式由一个人设计定下来以后，基于页面的，独立的，再交给其它人去做。当然事先要交流一下，以便统一风格。

-----------------------------------------------------------------------------------------

关于css中的注释，我想说几句——

因为css和js一样，都不是编译的，而是解析的，所以，多余的字符是会影响加载速度的。所以，注释，还有很花哨的为了注释而添加的字符，例如：

/**********************************************/

/==============================================/

/^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^/ ……等等

都应该是尽量避免的。但是，问题似乎又来了——没有注释，怎么方便后期的维护呢？其实我们只要好好研究一下Andy Bull的《样式表示例》就知道了。对于css文档的注释不应该是直接写到css文件中，而是应该提炼出来，变成css文档，这就像程序中代码注释要精辟而少，那是因为程序有详细文档。详细文档中提到的业务流程等方面的说明没有必要写到程序中，当然程序也分编译型（如asp.net）的和解释型（如asp）的。但是，无论是编译型还是解释型的，我们都应该在程序中放入大量的无谓的注释（当然，必要的注释还是需要的）。

所以对于css中的注释，我就一句话——把注释提炼成文档，而不是所有的东西都写到css文件中。

[ 本帖最后由 dushizhuma 于 2007-7-19 20:09 编辑 ]

openwings

我是这样做的：
1，准备一份书面的CSS结构图，要尽量把需要的CSS和表现页用网站地图的手法表现出来。
2，规范或内部通用的CSS命名规则，以及良好的注释习惯。即使你的E文很差劲，但拼音也要让别人看得明白。
3，尽可能把你所需要的不同CSS文件独立起来，比如 font.css , link.css main.css.并把这个数字控制在5个以内。而且每个CSS，不要超过20K。
4，尽可能的把每一个ID或class多用几次。不要用过一次就遗漏了它，而去书写另外的重复定义。
5，尽你最大的可能去思考，怎样用最简洁的CSS达到你最终的目标。
6，我们始终都不能说自己完美，我们只能尽力去做。

jdjia

原帖由 Satellite 于 2007-7-11 14:18 发表
css方面我不是权威，我从服务器缓存这方面来说一些css的使用体会
一般大型的网站都会设置服务器缓存 一般像css文件可能会设置成几个月 几天 几年的都有
这个时候会出现一个问题，就是万一你页面的结构变了，c ...

你说的对,一般都是在服务器端作压缩! CSS的压缩率能到50%以上.
另一方面就是CACHE的问题,在客户端作几年的CACHE. 然后在文件中作时间戳. 每次变只要改时间戳就可以了。

jdjia

1、多个CSS会增加服务器请求次数，反而会影响网页显示的速度。

2、网易把CSS改在页面里边，我问过网易的MM。她说是因为首页的样式和其它页面不一样，另一方面是为了防止CSS加载失败，才这样的。但一般来说CSS不会加载失败的。

[ 本帖最后由 jdjia 于 2007-7-11 22:08 编辑 ]

z3333426

首页的样式 一般都是独立出来。

就算被黑了 或者 出现什么其他技术故障。 好歹首页还能继续访问

不会丢脸了

加载CSS保持在4个以内为好。

现在用的后台语言不一样，也会影响到前台的写法。
vs里面写法 肯定跟php不太一样。

PHP不会建一大堆的文件夹吧。。。

现在我的TheMe都有十几个了。。

每个文件夹对应一个主题。
也有人会说如果改到了共用样式要改其他很多个。

少用一些耗资源的东西好。比如可以加载JS的CSS。
用了一次 死一次IE

少嵌套，少重复定义。
有一个自己书写的流程：
比如我的代码

#HotSearch {
        display:none;
        float:left;
        width:100%;
        height:22px;
        margin:0;
        padding:0;
        color:#F48120;
        line-height:26px;
        overflow:hidden;
}

先层样式。 然后在定义里面元素。 现在成了一个习惯
以后改东西的时候很容易找到。

pallas

说说我的做法..我本人喜欢两个样式表.这种看起来简单,但写起来可没有这么简单,让这种写法更有效的方法就是用心去写.

1. LAYOUT --布局
2.STYLE-- 选择器写样式.


LAYOUT的写法:
做的时候肯定是先写布局了.把布局调好,这样LAYOUT就完工了. 写的时候这里面能用ID的就最好用ID.所以#****就成为主要的选择标识.这时的LAYOUT结构,也就是项目CSS文档的基础结构了. 举例如下:
#top
#ad
#content
#content .left
#content .right
#bottom

2.STYLE的写法.COPY LAYOUT.CSS,它就是STYLE的框架.然后在这个框架里写详细的东东就OK了.结构如下
#top
#top .logo
#top .banner a

#ad
#ad image

#content
..
..
#content .left
..
..
#content .right
..
..
#bottom
..
..

这样的法可能会造成选择器代码较长,但是这样会最大程度的利用CSS的继承属性.并且有很强的罗辑性.代码再多,也能快速找到你想要维护的地方.因为我们从顶级的LAYOUT级别的选择器开始, 严格的降序级别进行选择. 完全实现了表现与结构的分离.
用这种写法,要有好的习惯,如在#top .logo a的写法中, 不要以为都写进去好用就行, 好的习惯是用自己的方法将不同的类型的样式进行排序,如"字体类, 背景边框类,显示属性类,..这种方法最易读.不光自己,别人读起来也一样. 样式表不怕他长, 重要的是结构清楚,可读性强.

本人不推荐过多的样式加载.这样看似易维护,实际上增加了编辑和浏览的负担.

别忘了, 要更好地增加可读性, 可以加上注释.哪怕你觉得你写的以经很完美了.

z3333426

ad 这样的关键字还是少用的好

很多浏览器都屏蔽这个层

ad banner ====

move

我刚接触这个,所以也没有什么好总结的,但是大家说的都让我受益匪浅,谢谢,
我在学习的过程当中第一个接触的是蕃茄红了的教程.
还有一些朋友告诉我说,要"先大后小"
大的外框架先定
再定里面的小的
我觉得注释是一个很好的习惯
如果我有说的不对的地方请老大别删除哦...

wiish

前期规划很重要。
不过制作过程中会有很多前期想不到发生，样式表也会有些乱。
所以，最好是后期再整理一遍，一来方便以后修改，二来可以为下一次提供参考。

flyswallow007

楼上说得对,前期的规划相当的重要!一个大站可能会存在以后很多栏目的增加或减少.先做好可扩展性.分成不同的块,再加以整合,配合CSS规划文档.总体来说.基本上问题还是不大的.

我一般的做法是:
首页:index.css---------------------------只管首页
共同数据:data.css(如:mgt30:margin-top:30px;)---------------------------所有页面里特殊高度的定义
二级栏目:   /二级栏目/style.css和layout.css--------------------------各二级栏目中,自已的风格与布局定义.
共同box:box.css------------------------------------------所有页面里相同页内栏的定义,比如:两个不同的栏目里都有评论.那么评论就单独定义出来.

N多方法都试过.自己觉得这个方面是比较好用的.至少目前管理4个前台工程师交叉写作(全是不认识的),没出现过问题...之前沟通会出一个统一的文档.表明哪些可以自己按自己想法来,哪些要按统一的css来...

flyswallow007

另外还补充一点:

前台代码制作环节中,个人认为最重要的就是: css树形结构规划与css注释的详细度.可能罗嗦了点哈!

css树形结构规划:可以清楚的知道哪些栏目内页面应该调用哪些css.配合css规划文档,在大型的团队中,基本上这点算是重中之重了.
css注释的详细度:还是那句话,谁都不能保证一个月后能认明自己的代码.一年后呢?是!css代码是简单,可想想,如果有注释你要节约多少的时间啊....为公司节约多少的人力成本啊(#这点好像..是给打工的我们自己找麻烦,哈哈.)...

rainoxu

我的一点心得是:

1.做一个全局使用的CSS,主要是和布局有关的,网站的整体风格往往都是差不多统一的,至少在框架上是不会有太大的异同,所以,可以把布局的样式单独分离出来,做为一个基础,各个细节写在相应的CSS中,和布局的CSS结合起来使用.好像这个方法比较常用!当在,如果网站规模不是很大的话,这样似乎也没有必要,反倒是麻烦了!

2.有这样一个想法,不过还没有用过,就是定义一些常用的class,比如不同的字体,不同的颜色,可以在class="class1 class2 class3"这样组合使用,特别是碰到需要复杂的显示效果时候,为每种表现去定义一个样式是不是值得的,还是把它细化,细化到字体,颜色,然后再组装起来使用,例如我定义了10种字体大小,10种字体颜色,组合起来可以出很多效果,但如果要分别去定义具体的这些样式,那么代码的工程量是多么浩荡???

3.关于样式的命名,要能容易理解其竟思,比如#nav表示导航,不要用#n1这样没有含义的命名,或许小站点你不会觉得有什么麻烦,但如果构建一个像网易那样的网站,这样的命名会让你限入无底的深渊,所以命名一定要能让自己看懂,这样别人接手你的程序需要更改时,也能轻松上手!

4.ID和CLASS的区别是个老话题了,使用上要合理,就不多说了吧,蓝色里面一搜好多资料了!

5.有时我觉得CSS HACK似乎有些麻烦,有些效果FF和IE显示有不同,那我觉得在这些具体的效果上写两个样式,用JS来判断一下浏览器,使用相应的样式会更好一些,因为有时为了用CSS HACK以达到浏览器的兼容花费的时间太多,还不如避重就轻,用用JS会不会好一些?

6.另外,像程序员那样,建立自己的CSS代码库,这点我觉得有必要强调一下,把一些常用的效果做收集起来,这样写的时候直接copy and paste,可以省去不少自己写的时间,做一些修改就可以了.CSS也可以算是程序,有必要建一个自己的代码库,比如链接,字体,常用的box的布局等,这些都可以搜集着,方便调用!

fourfour

原帖由 flyswallow007 于 2007-7-12 16:05 发表
首页:index.css---------------------------只管首页
共同数据:data.css(如:mgt30:margin-top:30px;)---------------------------所有页面里特殊高度的定义
二级栏目:   /二级栏目/style.css和layout.css--------------------------各二级栏目中,自已的风格与布局定义.

我接触这些时间不长，想问一下：

布局的layout.css里是不是就只放各div的布局相关的定义css呢？比如位置float、高宽width、间距margin/padding等等；

而style.css就放对应于layout.css中各div中的样式呢？比如链接样式a、字体相关属性比如颜色color

这样的细节规划可行吗？谢谢。

dushizhuma

原帖由 openwings 于 2007-7-11 19:17 发表
我是这样做的：
3.尽可能把你所需要的不同CSS文件独立起来，比如 font.css , link.css main.css.并把这个数字控制在5个以内。而且每个CSS，不要超过20K。
...

这样分的那么细的话，项目大的话，不可能控制在5个之内吧。而且项目很大的花，每个css20k也不太好说。

这样还有个致命的缺点：还没有没有针对性，你不知道里面的样式在什么地方被用到了。这样，你造成删不敢删，改不敢改的尴尬。

openwings

呵呵，你说的也对，我是仅仅指一些页面在10-30之间的，也许根本不用分成5个CSS文件，有2-3个主要的就完全可以了```控制在单个20K以内也不是难事吧？

象LS所说``如果你要做几十M，几个G的大站``那么当然不可能只分成那么几个CSS文件了！
但是这里就有个问题了：
有没有人精确计算过：
如果独立调用5个CSS文件，每个10K，和一次调用50K的单个CSS文件，到底哪个快些？
抛开CACHE不讲！

另外你可能忘记了DW里的搜索功能了吧，如果我忘了哪个ID在哪里被引用过，CTRL+F就解决了`

就算搜索可能会存在误差，那么我写CSS的时候，都是写一个，用一个。如果写了没用``写它做什么？当时就删除了``

如果你会说不便于以后的更改和管理``那你就错了``大家都知道，良好的注释习惯会解决这一问题！

我是小菜``虚心来学习滴```高手继续``

[ 本帖最后由 openwings 于 2007-7-16 09:58 编辑 ]