再谈CSS样式表书写风格
星期天 03.29.2009 - Posted in 工作分享, - 4,634 views关于书写习惯，遵循曾经总结过的风格标准，现在一点都没有变。并且近来翻看高手作品，横向连排似乎在大产品项目中逐渐成为主流，个人认为如此维护效率的确更高，并且未来显示器肯定是朝越来越大、越来越宽发展。
通常我维护别人作品第一步都是调整空格，基本下图这个造型的样式表都是我写的，只有我这种眼里不揉沙子的人才对多个、少个空格如此敏感。至于效果上有什么影响，不妨对比参考。代码编辑器对同行数定位做的都比较好，因此我们要解决的是如何快速纵向定位目标。
例子来自2006年8月Microsoft.com首页。
并且我观察到最近流行的栅格化、渐进增强等设计理念，都可以很好应用到样式表设计上。好代码应该清晰上下、左右分级，适当的分块、留白将有助于模块化设计，大大提高可扩展性、可复用性、可维护性。总的来说，书写有如下四个方面值得探讨，并积累个人（团队）习惯：
- 命名
- 排版模式化
- 属性定义顺序
- 注释格式
如果再加上各种Hack语法，以及-moz-, -webkit-等私有定义，这个事情复杂无比。不过在组织角度可以轻而易举想到，应该把它们独立出来并分开调用。学问很深，先整理思路，有空再好好探讨总结。下图是最近改个人网站的代码片段：
前几天用Css3语句text-shadow在繁体某中文情况下，成功将Chrome2两次搞死，不得已降级Chrome1使用。值得一提的是，text-shadow效果非常好，淡淡的阴影甚至有点水墨感觉。从最近发展来看，各浏览器往标准化靠拢前进的步子将越来越大。
可预见的将来，Css将代替很大部分视觉设计工作，以后web设计稿子几乎可以不再使用画图这种原始办法。也就是说，将来web视觉设计知识体系将进一步与编码结合。近三年我的工作重点方向并不在页面结构&表现之上，但原型框架图还是多使用HTML提高效率，同时也全部手写实现。基本技能多动手没坏处，至于效率嘛？无他，唯手熟耳。
经常与习惯欠佳的同行开玩笑，写代码也要注意矜持，你不是一个人在战斗。好代码就算用记事本打开也是艺术品，何况是在做设计。样式表在编辑器里，本身就是个信息设计练习。
蓝色理想
http://www.blueidea.com/tech/web/2009/6558.asp
http://bbs.blueidea.com/thread-2919695-1-1.html
© 一叶千鸟（转载请留原文链接，更新于2009年04月03日11点）
很好, 但是我还是喜欢用分行的风格, 要省空间可以在敲完代码后用工具压缩.
03.29.2009 11:25 下午 - 1楼另外, 所有 id 和 class 名最好不要出现大写字母.
@Mg12
03.29.2009 11:28 下午 - 2楼强化书写风格主要是为维护，不分行的意义并不在于占空间，前文有详细描述；
例子选的有问题，已完善，谢谢你。
初学者受教于此文。
03.30.2009 12:12 上午 - 3楼顶下
03.30.2009 12:24 上午 - 4楼老大能给我个你写的网站的完整代码给我学习学习吗？
我还是用那种清空所有空格的写法，但觉得在开发阶段可以先用条理比较清晰的写法，不用考虑空格与Tab键的存在，就是不要太注重文件的大小，这样比较好维护,在正式使用传到服务器的时候再统一压缩。
03.30.2009 8:22 上午 - 5楼这样书写效率很低下，尤其是团队配合的时候。
03.30.2009 10:07 上午 - 6楼问题1.我要浏览整体样式的时候需要脑袋从左看到右从上看到下
问题2.好的样式是“平行”的，不是我们眼前网页所看到的有内外层，这个需要通过好的前台构造出来的，而不是你现在写的层层缩进，这个需要你再去理解。
问题3.我们能看到不少门户网站都是横向方式的CSS，但是那是你看到的前台样式，还有一个内部本地测试环境下的版本，他是默认的纵列方式书写的。之所以这么做的原因就在于提高CSS在最终输出的时候运行效率。
问题4.这个应该算是问题1的补充，比如我要看A的样式a和c，那么我先要找到A，再在这一行找到a，再看a的属性，再找c，再看c的属性，如果a和c中间间隔了b、d、z、h……那请问你这个方便吗？如果我们还要看B的e，Q的d、f、g呢？
问题5.这个算是问题2的补充，按照你的层层缩进的思路，我要找一个子级层，那么就得先找父级再找子级，如果我写变态点，有个孙级或者是曾孙……那么维护起来相当恐怖。还是强调一点，世界是平的，虽然他有层次。这个需要通过好的前端构造去理解。
@ Veelee
1. 你看书、阅读的时候不是从左看到右从上看到下么？会感觉效率低下么？
2. 好的html你认为需要缩进么？
3. 终端输出格式化不像你想的那么简单。
5. 人的问题，比如id和class没用好。
不能用习惯来定论不同方法之间的效率高低，因为有个熟练程度差异；
03.30.2009 10:16 上午 - 7楼其他问题，请参考上篇原文有关写法的具体思路。
分行加缩进 比较好看一些吧
03.30.2009 10:36 上午 - 8楼好代码就像是艺术品，领教了！
03.30.2009 11:02 上午 - 9楼@千鸟
03.30.2009 11:21 上午 - 10楼早些年前我的也是和你现在一样这么想的，完全相同。时间会改变一个人的，好的团队也会改变一个人的习惯，好的工作方式也能提高自己的习惯，我说的那几点不是个人习惯，而是在团队合作的时候慢慢总结出来的。
@Veelee
03.30.2009 11:23 上午 - 11楼你的看法首先我从逻辑上就不认同，在考虑整理更多资料，回头我们再用实例探讨取长补短吧；
同时，我也花了三年时间来实践证明自己的观点，另所指案例并非简单首页门户。
定个数，3，4或者5
03.30.2009 1:26 下午 - 12楼属性数小于这个数的话，单行书写；
属性数大于这个数的话，分行书写；
.A {a;b;c;d;}
.B {
a;
b;
…
z;
}
缩进，是必须的。不缩进跟没经过排版的报纸没两样。
03.30.2009 1:27 下午 - 13楼我同意veelee大部分观点
03.30.2009 1:31 下午 - 14楼css使用纵向书写风格最便于阅读，那和看书不是一回事，想象下ul的默认样式？
另外，css的层层缩进真怪异
to 茗
03.31.2009 10:34 上午 - 15楼维护样式表最多操作是搜索定位、对比，单屏显示更多定义好维护，还是纯粹利于往下扫视好？请先充分理解“清晰上下、左右分级，适当的分块、留白”，或者写够十万行css再下“最”的结论。
1.自从不用DW之后，就一直是横式写法了，不然一个样式N+1行定位实在有点困难；
2.不管横式写法还是竖式写法，属性的定序是必须的，可以是按照FF建议的顺序，也可以是字母顺序；
3.个人对样式缩进不太赞同，可能咱的浏览器不是大屏幕的关系，曾经写过一段时间，总感觉稍微长一点的定义，就需要换行了，不然得横向滚动条，实在没效率；
4.样式的良好注释和空行是好方法；
5.样式的命名上我觉得也需要一定的规则，增加类似程序的保留字之类的，还有注明的驼峰式命名等；
6.属性之间是否空格看个人习惯了，反正最终输出可以借助ant或者直接写后端程序压缩输出，比如雅虎的压缩工具就不错哇；
准确说，应该是mozilla建议的顺序，具体可以查看mozilla网站；
03.31.2009 10:38 上午 - 16楼另外，是咱的显示器不是大屏幕，呵呵
@Joeke
03.31.2009 10:44 上午 - 17楼原文已经提到命名、属性定义顺序问题。
属性之间加空格、属性之内不要空格主要是为提高可读性。顺便再说句，不是超大流量的网站，我想还不用着css压缩、命名压缩此类麻烦自己麻烦大家的极端优化手段吧。
除了注释方式和缩进CSS
同意楼主的观点,我和楼主大部分写法是一样.
但缩进实在接受不了,个人习惯上吧.看起来感觉乱.我更喜欢前排刷的对齐.
至于喜欢纵向写的,我也没什么说的.个人习惯吧.我刚学那会是这么写的.写着写着就横着写了.感觉就是舒服.
03.31.2009 5:26 下午 - 18楼好文啊，我现在的CSS书写风格受你的影响很大，可论坛有很多人抱怨我太复杂了（我喜欢类似 #page_head ul.normal_list li.pic a{}的选择符）。甚至有人预言我未来的女朋友不会幸福的。
横排+缩进。这样无论是从xhtml中提供的线索去找样式，或者根据选择符去找xhtml结构，都异常迅速！
03.31.2009 10:09 下午 - 19楼紧凑的代码看起来更精致。你喜欢调空格，那是你的一种自我强迫症，跟维护效率之类的没有关系。
03.31.2009 10:55 下午 - 20楼@yoom
关于你这个“#page_head ul.normal_list li.pic a{}”写法。。。
CSS的优先级问题就会把你搞的焦头烂额的
关于缩进代码我本人还是比较赞成的。
04.01.2009 8:49 上午 - 21楼像EP这样的编辑器起码代码折叠方面就会让人很省心
@MarVell
实在搞不清楚，#page_head ul.normal_list li.pic a{}跟优先级、焦头烂额有什么关系？
除非你写样式毫无规律。一会儿 ul.normal_list .pic a{}，一会儿#page_head ul.normal_list li.pic a{}。才会让自己焦头烂额吧。
在最近的一个项目中，我大量使用了这种选择符。并没有出现焦头烂额的情况，如果说较详细的选择符路径会增加css体积，这一点我还相信。
04.01.2009 9:06 上午 - 22楼博主弄的太细了，反而影响效率。我很质疑那样写真的会提高你们项目组的工作效率吗。？？说白了也只不过是你个人的喜好而已。如果我是你同事，看你的代码 首先就会用CSS对齐工具格式化了在看。
相信下面的书写方式会符合大多数人的习惯。
/* nav */
.nav{
…
…
}
.nav ul{
…
…
}
.nav ul li{
…
}
至少也不会带给人困扰吧。。
但你的书写方式会给我带来困扰。
04.01.2009 9:40 上午 - 23楼@zz03 可能是你多年的习惯吧。
早期的报纸都是竖排的，如果突然看横排的书刊，他就会觉得很突兀，觉得影响效率。
每次看到你这种样式，俺都要把它弄成横的，真麻烦。
另外，DW右边那么多可视区域都浪费了。
04.01.2009 2:15 下午 - 24楼我也写横的,行数多了,便于查找.没有缩进,因为要多敲格子,麻烦.一般会分区写,留空行,还有注释,这样还是便于查找
04.02.2009 10:42 上午 - 25楼个人一直在用第一种方法书写CSS，已经习惯了。碰到大模块分割的时候，注释下。
04.03.2009 3:22 下午 - 26楼可能这样写对以后的维护，还有共同开发会比较麻烦！
很不错.但是相对有些代码写成一行,外加缩进的话.我的本本可能不能很好的显示.所以我敲代码还是分多行的.有缩进.并分区管理.从header写到footer
04.04.2009 2:29 下午 - 27楼最近开始写的css全是横向没什么问题，也不用管缩进，使用vim速度相当快。
本来横写之后打算加上缩进区分层次，结果没有坚持下来。
to楼上几位，不觉得代码竖向写能加快多少效率，纯文本编辑器下缩进很繁琐，而这种写法可以用白板notepad写也绝对没有问题
唯一问题是觉得博主的id稍微多了点，因为毕竟id一个页面只有一个，如果不是为了覆盖属性的话，id一般一个就够了，修改起来定位也不会很困难的。
说道团队合作，一阅读人家代码我就拿firebug查了，根本不需要管原来的那个人的格式到底如何
04.08.2009 7:03 下午 - 28楼如果是自己维护自己的css,横向确实写的顺手,看起来也不麻烦。
04.09.2009 10:58 上午 - 29楼但多个人维护一份css,特别是看别人写的css，个人还是认为看纵向的比较直观。
书写风格这个一般都看个人习惯。
04.09.2009 11:52 下午 - 30楼不过如果是团队合作，事前一般都会“约定成俗”吧。