再谈CSS样式表书写风格

yoom 楼主

这是一篇转向贴：

http://blog.rexsong.com/?p=5968 再谈CSS样式表书写风格

关于千鸟更老的一篇文章，请看：
http://blog.rexsong.com/?p=425 CSS样式表书写风格

goos

开始一直没有风格！

后来逐渐的趋向于同一属性同一行，同一类有缩进

1. .nav{}
   
2.    .nav ul{}
   
3.        .nav ul li{}

复制代码

最近书写回归原始，不过同一类进行区块划分，添加注释，方便维护查找。

1. /* nav */
   
2. .nav{
   
3.     background:#fff;
   
4.     color:#333;
   
5. }
   
6. .nav ul{
   
7.     ...
   
8.     ...
   
9. }
   
10. .nav ul li{
    
11.     ...
    
12. }

复制代码

slloser

现在开始喜欢这样的
#div{
    text-decoration:none; color#ccc; height:20px;.....
}

kouyubo

这讨论太多了

birdstudio

这一点真的可以看出各人习惯不同。
我习惯 2 楼第二套方案，呵呵。我看到一长条的规则就有点头晕。

wxbwyx821

我习惯竖着写， 添加注释就行  最后发布时再横过来！

yoom 楼主

还没尝试过竖着写样式，滚屏麻烦。
@birdstudio，书刊的文字也是横着的，为什么不会头晕呢   --引用--千鸟的回复。

zidanezhicong

比较在意属性书写的顺序

929988

习惯二楼第二种书写方式,维护起来也比较方便

nick03

很明显。2楼的第2种方法不管是团队协作还是维护都要好一些。

zb193002

看看留下脚印!!

weizeyan

.block,p,li,ul,form,h1,h2,h3,h4,h5,h6,dl,dt,dd{ margin:0; padding:0; display:block;}
一条规则写一行，然后回车。

birdstudio

原帖由 yoom 于 2009-4-1 09:14 发表
还没尝试过竖着写样式，滚屏麻烦。
@birdstudio，书刊的文字也是横着的，为什么不会头晕呢   --引用--千鸟的回复。

确实大家的习惯都不一样，不过这里我还是要抬一下杠。

首先，CSS 和书刊的信息类型还是不一样的，我们大脑的处理方式也不一样。书刊文字是连续的文本流，而 CSS 更像一种数据或一种“表”。纵向阅读更适合进行检索。比如在 Windows 资源管理器中，我更喜欢“详细资料”视图，而不是默认的“图标”视图，是同样的道理。

另外，可能千鸟和你一样，也没有尝试过竖写。那不妨尝试一下。
竖写的另一个好处在于，为某一行添加注释会很方便、清晰。便于团队合作。
我同意横写代码对屏幕的利用率更高，但是与此同时，阅读的压力也更大。此消彼涨，就看我们如何取舍。

再扯一句玄乎的，从生理角度来说，似乎视线进行长距离的 Z 形移动比较累。:D

其实我有时也会横写，就像下面的代码块，目的也是便于检索和维护。

1. /** 标签感应鼠标样式 **/
   
2. #dv_nav li.n1 a:hover {background-position: 0px -68px;}
   
3. #dv_nav li.n2 a:hover {background-position: -95px -66px;}
   
4. #dv_nav li.n3 a:hover {background-position: -190px -64px;}
   
5. #dv_nav li.n4 a:hover {background-position: -285px -62px;}
   
6. #dv_nav li.n5 a:hover {background-position: -380px -60px;}

复制代码

musictea

受益非浅...值得学习!

madwolfcrazy

一写一行 不缩进

47tz

我也写一行，通常在改别人的代码时，也先把那些讨厌的缩进以及乱七八糟的跳行干掉.....属千鸟风格

birdstudio

发现一个问题，yoom 和千鸟都是在 DW 中写 CSS，而 DW 的代码着色在功能上实在是很“简洁”，标配是三种颜色。所以在这种情况下，可能横排代码看起来似乎还不是很乱。

而我是在 UltraEdit 中写 CSS 的，代码着色之后的 CSS 五彩斑斓，如果横排是没法看的。

birdstudio

接着再罗嗦几句，用 UltraEdit 或 Editplus 的人一般都会开多个侧边栏，这样屏幕的宽度还是比较吃紧的。

再扯点别的，“竖排派”著作等身的速度会比较快！一不小心就是近千行的代码！哈哈哈

[ 本帖最后由 birdstudio 于 2009-4-1 18:03 编辑 ]

14px

一直竖写。
最后发现滚屏实在麻烦，换成横写了。
尤其是样式文件横写都超过1000行时。

radom

h2 {
background:#CDCDCD url(../image/bg_title_r.gif) 5px no-repeat;
height:37px;width:200px;
margin:2px;padding:2px;border:2px solid yellow;
font:12px/30px bold;text-align:center;color:#FFF;
}
我不按什么顺序，但我按分类写

一叶千鸟

to all,
以我多年在各种环境（任何编辑器）、各种条件（忙&不忙）、各种状态（创建&维护）实践的结果看来，写样式表最最麻烦的操作是用鼠标滚屏，如果能想办法减少滚屏，不打断我敲键盘的节奏，效率自然就上来了。

另外“再谈”原文最重要的创新，是提出用“信息设计理念”编码，也是为更早篇原文去空格提供理论支持。

to birdstudio
任何方式都有必然的缺陷，但我们应该找出最经济划算的法则，不断修炼，熟能生巧。我什么方式都至少实践超过两个月。

[ 本帖最后由 一叶千鸟 于 2009-4-2 00:09 编辑 ]

starman

习惯2楼写法。。竖着写太长了。。。不过这东西真的因人而异

zomble

我初学者，受老师影响习惯2楼的写法，觉得一行写下去 以后看的时候会疯掉。。。

birdstudio

大侠现身，谢谢回复。

可能我的 CSS 水平还不够高，写 CSS 时我还是思考的时间居多，真正敲代码的时间并不多，所以也习惯了打打键盘再动动鼠标，然后再抓耳挠腮一番，呵呵。另外关于滚屏的问题，是不是可以考虑一下搜索区段标记？而且我发现 UltraEdit 中的函数导航很好用，正在培养自己的习惯。

cryptlord

我这么写：
h1, h2, p { margin: 0; border: 1px solid; }
div { color: red; }
逗号、冒号、分号后面都1空格，花括号两边有1空格（末尾没有）

shellwayhe

我现在常用２＃的第二种写法，习惯了
不过２０＃的写法也不错哦，在属性中按照类型分类

hellograce

看使用的编辑器了.

rainoxu

用注释隔开同一类别的CSS

dcchan

挺有意思的,一直没有试过缩进的写法.

个人觉得自己看的话,分块 分行写好.
项目完成时压缩一个一条规则一行的css交差.

shally2

/*  ==================Mainbody Start================ */

.gov-menu{ width:207px; margin-bottom:8px;}
     .gov-menu li{ width:187px; height:40px; margin-bottom:3px; line-height:40px;}

一般都会这样写，不过似乎书写顺序更重要，究竟是把一些经常需要修改的属性写前面好还是把定位那些元素写前面让人一眼就明好呢··？

[ 本帖最后由 shally2 于 2009-4-2 15:57 编辑 ]