请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 2187|回复: 31

[讨论] 再谈CSS样式表书写风格 [复制链接]

yoom 楼主

木匠的背篓

版主 手机认证 

帖子
4903
体力
14530
威望
18
居住地
浙江省 杭州市

维基贡献

发表于 2009-3-31 22:05:53 |显示全部楼层
这是一篇转向贴:

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

关于千鸟更老的一篇文章,请看:
http://blog.rexsong.com/?p=425 CSS样式表书写风格
西部数码顶级域名注册商39元抢注!
goos 

锅巴三月三

荣誉管理 手机认证 

帖子
2031
体力
3739
威望
15
居住地
北京市 通州区
发表于 2009-3-31 22:54:48 |显示全部楼层
开始一直没有风格!

后来逐渐的趋向于同一属性同一行,同一类有缩进
  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. }
复制代码
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

俯首阳明

银牌会员 手机认证 

帖子
759
体力
2297
威望
0
居住地
浙江省 杭州市
发表于 2009-3-31 23:02:18 |显示全部楼层
现在开始喜欢这样的
#div{
    text-decoration:none; color#ccc; height:20px;.....
}
用户最需要什么?

使用道具 举报

小扣扣子

高级会员 手机认证 

帖子
867
体力
847
威望
4
发表于 2009-3-31 23:08:38 |显示全部楼层
这讨论太多了
在路上,还要走多远

使用道具 举报

CSS魔术师

荣誉管理 手机认证 

帖子
2452
体力
5010
威望
4
发表于 2009-3-31 23:09:51 |显示全部楼层
这一点真的可以看出各人习惯不同。
我习惯 2 楼第二套方案,呵呵。我看到一长条的规则就有点头晕。
■ 提问请贴图贴代码。  ● 我的微博  ● 我的博客 (已恢复)

使用道具 举报

飞天蜈蚣

高级会员

帖子
240
体力
536
威望
0
发表于 2009-4-1 08:48:33 |显示全部楼层
我习惯竖着写, 添加注释就行  最后发布时再横过来!

使用道具 举报

yoom 楼主

木匠的背篓

版主 手机认证 

帖子
4903
体力
14530
威望
18
居住地
浙江省 杭州市

维基贡献

发表于 2009-4-1 09:14:21 |显示全部楼层
还没尝试过竖着写样式,滚屏麻烦。
@birdstudio,书刊的文字也是横着的,为什么不会头晕呢   --引用--千鸟的回复。

使用道具 举报

我爱阿仙奴

银牌会员 手机认证 

帖子
571
体力
2056
威望
1
居住地
广东省 深圳市
发表于 2009-4-1 09:14:52 |显示全部楼层
比较在意属性书写的顺序
<del>IE</del>

使用道具 举报

929988 
帖子
18
体力
30
威望
0
居住地
云南省 红河哈尼族彝族自治州
发表于 2009-4-1 10:57:57 |显示全部楼层
习惯二楼第二种书写方式,维护起来也比较方便

使用道具 举报

nick03 
帖子
301
体力
257
威望
0
居住地
广东省 深圳市
发表于 2009-4-1 11:00:44 |显示全部楼层
很明显。2楼的第2种方法不管是团队协作还是维护都要好一些。

使用道具 举报

帖子
1
体力
15
威望
0
居住地
陕西省 西安市
发表于 2009-4-1 11:14:06 |显示全部楼层
看看留下脚印!!

使用道具 举报

帖子
181
体力
649
威望
2
发表于 2009-4-1 13:18:57 |显示全部楼层

习惯这样的风格

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

使用道具 举报

CSS魔术师

荣誉管理 手机认证 

帖子
2452
体力
5010
威望
4
发表于 2009-4-1 13:21:19 |显示全部楼层
原帖由 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;}
复制代码
■ 提问请贴图贴代码。  ● 我的微博  ● 我的博客 (已恢复)

使用道具 举报

音乐红茶

银牌会员

帖子
450
体力
1417
威望
1
居住地
浙江省 杭州市
发表于 2009-4-1 15:12:55 |显示全部楼层
受益非浅...值得学习!

使用道具 举报

帖子
227
体力
412
威望
0
居住地
美洲 加拿大
发表于 2009-4-1 16:43:52 |显示全部楼层
一写一行 不缩进

使用道具 举报

47tz 
帖子
198
体力
1134
威望
0
发表于 2009-4-1 16:59:55 |显示全部楼层
我也写一行,通常在改别人的代码时,也先把那些讨厌的缩进以及乱七八糟的跳行干掉.....属千鸟风格

使用道具 举报

CSS魔术师

荣誉管理 手机认证 

帖子
2452
体力
5010
威望
4
发表于 2009-4-1 17:56:44 |显示全部楼层
发现一个问题,yoom 和千鸟都是在 DW 中写 CSS,而 DW 的代码着色在功能上实在是很“简洁”,标配是三种颜色。所以在这种情况下,可能横排代码看起来似乎还不是很乱。

而我是在 UltraEdit 中写 CSS 的,代码着色之后的 CSS 五彩斑斓,如果横排是没法看的。
附件: 你需要登录才可以下载或查看附件。没有帐号?注册
■ 提问请贴图贴代码。  ● 我的微博  ● 我的博客 (已恢复)

使用道具 举报

CSS魔术师

荣誉管理 手机认证 

帖子
2452
体力
5010
威望
4
发表于 2009-4-1 18:02:12 |显示全部楼层
接着再罗嗦几句,用 UltraEdit 或 Editplus 的人一般都会开多个侧边栏,这样屏幕的宽度还是比较吃紧的。

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

[ 本帖最后由 birdstudio 于 2009-4-1 18:03 编辑 ]
■ 提问请贴图贴代码。  ● 我的微博  ● 我的博客 (已恢复)

使用道具 举报

14px 

秋末

荣誉管理

帖子
1616
体力
4211
威望
52
居住地
湖南省 长沙市
发表于 2009-4-1 19:57:13 |显示全部楼层
一直竖写。
最后发现滚屏实在麻烦,换成横写了。
尤其是样式文件横写都超过1000行时。

使用道具 举报

radom 

radom

银牌会员 手机认证 

帖子
705
体力
1601
威望
0
居住地
广东省 深圳市
发表于 2009-4-1 20:35:51 |显示全部楼层
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;
}
我不按什么顺序,但我按分类写
命是失败者的借口,运是成功者的谦辞。

使用道具 举报

帖子
653
体力
743
威望
2
发表于 2009-4-2 00:08:26 |显示全部楼层
to all,
以我多年在各种环境(任何编辑器)、各种条件(忙&不忙)、各种状态(创建&维护)实践的结果看来,写样式表最最麻烦的操作是用鼠标滚屏,如果能想办法减少滚屏,不打断我敲键盘的节奏,效率自然就上来了。

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

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

[ 本帖最后由 一叶千鸟 于 2009-4-2 00:09 编辑 ]
个人网站 http://rexsong.com

使用道具 举报

灰白色的月亮

金牌会员 手机认证 

帖子
283
体力
3209
威望
0
发表于 2009-4-2 09:06:59 |显示全部楼层
习惯2楼写法。。竖着写太长了。。。不过这东西真的因人而异

使用道具 举报

zomble 
帖子
29
体力
128
威望
0
居住地
陕西省 西安市
发表于 2009-4-2 10:07:13 |显示全部楼层
我初学者,受老师影响习惯2楼的写法,觉得一行写下去 以后看的时候会疯掉。。。

使用道具 举报

CSS魔术师

荣誉管理 手机认证 

帖子
2452
体力
5010
威望
4
发表于 2009-4-2 10:11:20 |显示全部楼层

回复 21# 一叶千鸟 的帖子

大侠现身,谢谢回复。

可能我的 CSS 水平还不够高,写 CSS 时我还是思考的时间居多,真正敲代码的时间并不多,所以也习惯了打打键盘再动动鼠标,然后再抓耳挠腮一番,呵呵。另外关于滚屏的问题,是不是可以考虑一下搜索区段标记?而且我发现 UltraEdit 中的函数导航很好用,正在培养自己的习惯。
附件: 你需要登录才可以下载或查看附件。没有帐号?注册
■ 提问请贴图贴代码。  ● 我的微博  ● 我的博客 (已恢复)

使用道具 举报

地穴领主

银牌会员 手机认证 

帖子
884
体力
1611
威望
0
居住地
江苏省 南京市
发表于 2009-4-2 10:22:30 |显示全部楼层
我这么写:
h1, h2, p { margin: 0; border: 1px solid; }
div { color: red; }
逗号、冒号、分号后面都1空格,花括号两边有1空格(末尾没有)

使用道具 举报

Shellway

初级会员

帖子
103
体力
317
威望
0
居住地
福建省 厦门市
发表于 2009-4-2 10:27:38 |显示全部楼层
我现在常用2#的第二种写法,习惯了
不过20#的写法也不错哦,在属性中按照类型分类
乘风破浪

使用道具 举报

帖子
136
体力
1018
威望
0
居住地
湖南省 长沙市
发表于 2009-4-2 10:32:10 |显示全部楼层
看使用的编辑器了.

使用道具 举报

珍宝猪

钻石会员

帖子
1757
体力
5771
威望
6
居住地
浙江省 杭州市
发表于 2009-4-2 12:58:32 |显示全部楼层
用注释隔开同一类别的CSS

使用道具 举报

dcchan 

忘穿秋水

银牌会员 手机认证 

帖子
677
体力
1593
威望
0
居住地
广东省 深圳市
发表于 2009-4-2 13:10:47 |显示全部楼层
挺有意思的,一直没有试过缩进的写法.

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

使用道具 举报

帖子
36
体力
74
威望
0
居住地
广东省 广州市
发表于 2009-4-2 15:54:25 |显示全部楼层
/*  ==================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 编辑 ]

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-12 06:34 , Processed in 0.199227 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部