CSS中属性的书写顺序

最新推荐文章于 2024-11-11 23:45:17 发布

lzqial1987

最新推荐文章于 2024-11-11 23:45:17 发布

阅读量429

点赞数

分类专栏： hack css+div布局事项文章标签： css mozilla styles border float properties

css+div布局事项同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

hack

12 篇文章 0 订阅

订阅专栏

传说中的Mozilla推荐

/* mozilla.org Base Styles
 * maintained by fantasai
 */
/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding

Technorati 标签: CSS

 * 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文件的组织。