ITPub博客

首页 > Linux操作系统 > Linux操作系统 > CSS中属性的书写顺序

CSS中属性的书写顺序

原创 Linux操作系统 作者:iDotNetSpace 时间:2009-02-25 16:37:43 0 删除 编辑

传说中的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的顺序稍微调整下:

  1. 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等)
  2. 自身盒模型的属性(比如:width, height, margin, padding, border等)
  3. 排版相关属性(比如:font, line-height, text-align, text-indent, vertical-align等等)
  4. 装饰性属性(比如:color, background, opacity, cursor等)
  5. 生成内容的属性(比如:content, list-style, quotes等)

事情永远没那么简单,比如下面这些困扰:

  1. 对于shorthand怎么处理?比如 border: 1px solid red; 其中border-width是和盒模型相关的,但border-color是装饰性的。如何组织呢?
  2. 考虑到换肤功能,是否应该将color, background, border-color等和颜色相关的都放一块?以方便以后修改。
  3. 对于hacks如何处理?单独放到css文件最后面,还是和hack的属性紧挨着好?
  4. 维护同事的css文件时,对于新增加或有修改的属性,如何注释?如何书写?
  5. 还有,考虑到CSS Sprite, 所有背景图的选择器都放在一起?不过这已经超出本文的话题了:CSS选择器内属性的顺序和组织。
  6. 更进一步的讨论是:CSS文件内的结构组织,以及多个CSS文件的组织。

任何解决方案都不能解决所有问题,但只要能解决常用的大部分问题,就已经是非常好的方案了。

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12639172/viewspace-557794/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-01-04

  • 博文量
    2376
  • 访问量
    5315946