YinJuan 通过 Google 阅读器发送给您的内容：
于 09-2-20 通过
岁月如歌 作者：lifesinger
传说中的Mozilla推荐
/* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order:
* display
* list-style
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
* */ ...
来源：http://www.mozilla.org/css/base/content.css
在怿飞’s Blog的这篇文章里，又将上面的属性分成了三组：显示属性、自身属性和文本属性。在回复里，inG补充这还和浏览器的解析过程有关：浏览器先对DOM定位，然后解析自身属性，接着再解析内部对象。（没找到相关的英文资料，有知情者还望告知）
在Mozilla官方，其实并没有推荐任何CSS书写顺序。很可能是某个开发者在阅读fantasai的这篇文章 mozilla.org Markup Reference 时，顺便对fantasai的CSS源文件产生了兴趣，因此才有了上面的发现。
字母排序
NETTUTS上时不时有些好文章，这不，前不久，Trevor Davis就分享了一篇：5 Ways to Instantly Write Better CSS. 这篇文章中，推荐CSS的属性按字母排序。
优点是：简单，任何人只要遵守，一看就明白。
缺点是：太简单，缺乏逻辑性。比如position, left, top等，这种紧关联的属性，如果都按字母排序，书写和维护起来都不方便。
Andy Ford推荐的排序
Andy Ford是HTML和CSS方面的专家，最近写了一篇文章：Order of the Day: CSS Properties. 文章推荐的CSS书写顺序为：
1. Display & Flow
2. Positioning
3. Dimensions
4. Margins, Padding, Borders, Outline
5. Typographic Styles
6. Backgrounds
7. Opacity, Cursors, Generated Content
例子：
el { display: ; visibility: ; float: ; clear: ; position: ; top: ; right: ; bottom: ;
left: ; z-index: ; width: ; min-width: ; max-width: ; height: ; min-height: ; max-height: ;
overflow: ; margin: ; margin-top: ; margin-right: ; margin-bottom: ; margin-left: ; padding: ;
padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; border: ; border-top: ;
border-right: ; border-bottom: ; border-left: ; border-width: ; border-top-width: ;
border-right-width: ; border-bottom-width: ; border-left-width: ; border-style: ;
border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ;
border-color: ; border-top-color: ; border-right-color: ; border-bottom-color: ;
border-left-color: ; outline: ; list-style: ; table-layout: ; caption-side: ; border-collapse: ;
border-spacing: ; empty-cells: ; font: ; font-family: ; font-size: ; line-height: ; font-weight: ;
text-align: ; text-indent: ; text-transform: ; text-decoration: ; letter-spacing: ; word-spacing: ;
white-space: ; vertical-align: ; color: ; background: ; background-color: ; background-image: ;
background-repeat: ; background-position: ; opacity: ; cursor: ; content: ; quotes: ; }
Andy的顺序大体上和fantasai推荐的顺序保持了一致，但细节上更具可操作性。
SitePoint上还有个很热烈的讨论贴：How do you order your properties within a declaration block?
我的想法
我喜欢fantasai和Andy的书写顺序，但fantasai的顺序中，”自身”属性有点含混不清，Andy的则太细，难以记住。我觉得可以借鉴CSS 2.1 Specification中对CSS属性的分类，将Andy的顺序稍微调整下：
- 影响文档流的属性（比如：display, position, float, clear, visibility, table-layout等）
- 自身盒模型的属性（比如：width, height, margin, padding, border等）
- 排版相关属性（比如：font, line-height, text-align, text-indent, vertical-align等等）
- 装饰性属性（比如：color, background, opacity, cursor等）
- 生成内容的属性（比如：content, list-style, quotes等）
事情永远没那么简单，比如下面这些困扰：
- 对于shorthand怎么处理？比如 border: 1px solid red; 其中border-width是和盒模型相关的，但border-color是装饰性的。如何组织呢？
- 考虑到换肤功能，是否应该将color, background, border-color等和颜色相关的都放一块？以方便以后修改。
- 对于hacks如何处理？单独放到css文件最后面，还是和hack的属性紧挨着好？
- 维护同事的css文件时，对于新增加或有修改的属性，如何注释？如何书写？
- 还有，考虑到CSS Sprite, 所有背景图的选择器都放在一起？不过这已经超出本文的话题了：CSS选择器内属性的顺序和组织。
- 更进一步的讨论是：CSS文件内的结构组织，以及多个CSS文件的组织。
任何解决方案都不能解决所有问题，但只要能解决常用的大部分问题，就已经是非常好的方案了。
期待你的建议。
16 comments
