element {
/* I. Microcosm of All Properties */
content: /* What it is. */
display: /* Where or whether it is. */
position: /* Relationships to others. */
/* A. Content Properties † */
background-image: /* 1. Internal content styling ... */
background- ...
border:
opacity:
font-family: /* 2. Typographic styling ...*/
font- ...
text- ...
color:
/* B. Display Properties */
box-sizing: /* Ordered by Box Model ...*/
height:
width:
max- ...
padding:
margin:
/* C. Relational Properties */
float:
order:
z-index:
/* D. State Properties */
cursor:
animation:
transition:
}
Here's how I do it, and I think this makes the most sense in terms of logical ordering. The secret sauce is the three properties at the top. In terms of 80/20 analysis, knowing those three can help me determine what's going on in the rest of the styles.
element {
/* I. Microcosm of All Properties */
content: /* What it is. */
display: /* Where or whether it is. */
position: /* Relationships to others. */
/* A. Content Properties † */
background-image: /* 1. Internal content styling ... */
background- ...
border:
opacity:
font-family: /* 2. Typographic styling ...*/
font- ...
text- ...
color:
/* B. Display Properties */
box-sizing: /* Ordered by Box Model ...*/
height:
width:
max- ...
padding:
margin:
/* C. Relational Properties */
float:
order:
z-index:
/* D. State Properties */
cursor:
animation:
transition:
}
† You can see especially here with "background-image" and "font-family", I also tend to begin these sections with properties that have long strings for their values. I think it serves as a natural separator between these sections.
I don't believe the order of the properties will have any impact on the end result, unless two of like properties are called like
border:1px solid #000;
border-top:none;
versus
border-top:none;
border:1px solid #000;
Other than that, whatever you find easiest to read would be the best bet. I list them alphabetically since that tends to group like properties together.
There isn't a set standard. Some people have a preference depending on their level of OCD. I like to do height/width first then positioning, colors, etc. I've seen people make jokes about corporate CSS being ordered based on character count. At least I think they were joking.
I generally put the properties in alphabetical order, this way when you search a heavily populated CSS rule with many properties it a little easier to find what your looking for.
The main ordering issue with CSS is the order of the classes, not the properties. Since stylesheets cascade, the more specific stylesheet will win. I tend to group in somewhat alphabetical order, with possible exceptions for like properties that belong together, regardless of alphabetical order.
There is, indeed, no widely agreed-upon convention. I prefer writing Concentric CSS where I list the properties in order from the outside of the box to its inside, so that I can remember whether the padding goes inside or outside the borders, and so forth. After reading your excellent question here, I realized that I felt strong enough about it to write a blog post, so here you are in case you're curious:
There is no widely adopted convention. There is no difference between either example, so you should choose the convention you prefer. If you must really satisfy the hobgoblins, choose alphabetical or the order it affects the box model.
发布评论
评论（9）
这是我的做法，我认为这在逻辑顺序方面最有意义。秘密武器是顶部的三个属性。就 80/20 分析而言，了解这三个可以帮助我确定其余风格的情况。
† 您可以特别在此处看到“背景图像”和“字体系列”，我也倾向于使用具有长字符串值的属性来开始这些部分。我认为它是这些部分之间的自然分隔符。
Here's how I do it, and I think this makes the most sense in terms of logical ordering. The secret sauce is the three properties at the top. In terms of 80/20 analysis, knowing those three can help me determine what's going on in the rest of the styles.
† You can see especially here with "background-image" and "font-family", I also tend to begin these sections with properties that have long strings for their values. I think it serves as a natural separator between these sections.
我不相信属性的顺序会对最终结果产生任何影响，除非两个相似的属性被称为 like
与
除此之外，您认为最容易阅读的任何内容都是最好的选择。我按字母顺序列出它们，因为这往往会将类似的属性分组在一起。
I don't believe the order of the properties will have any impact on the end result, unless two of like properties are called like
versus
Other than that, whatever you find easiest to read would be the best bet. I list them alphabetically since that tends to group like properties together.
我见过一些指南说它们应该按字母顺序排列。那么，你的第二个例子。
有像 CleanCSS 这样的工具可以为您按字母顺序排列它们。
I've seen several guides that say they should be in alphabetic order. So, your second example.
There are tools like CleanCSS that can alphabetize them for you.
没有一个固定的标准。有些人根据自己的强迫症程度有偏好。我喜欢先做高度/宽度，然后做定位、颜色等。我见过有人开玩笑说企业 CSS 是根据字符数排序的。至少我认为他们是在开玩笑。
There isn't a set standard. Some people have a preference depending on their level of OCD. I like to do height/width first then positioning, colors, etc. I've seen people make jokes about corporate CSS being ordered based on character count. At least I think they were joking.
并不真地。
但按字母顺序排序和/或对字体规则和框/布局规则进行分组是有意义的。你的代码会更清晰。
例子：
Not really.
But it would make sense to order alphabetically and/or group font rules and box/layout rules. Your code would be more clear.
Example:
我通常将属性按字母顺序排列，这样当您搜索包含许多属性的密集 CSS 规则时，可以更轻松地找到您要查找的内容。
I generally put the properties in alphabetical order, this way when you search a heavily populated CSS rule with many properties it a little easier to find what your looking for.
CSS 的主要排序问题是类的顺序，而不是属性。由于样式表级联，因此更具体的样式表将获胜。我倾向于按字母顺序进行分组，但无论字母顺序如何，属于在一起的类似属性可能存在例外。
The main ordering issue with CSS is the order of the classes, not the properties. Since stylesheets cascade, the more specific stylesheet will win. I tend to group in somewhat alphabetical order, with possible exceptions for like properties that belong together, regardless of alphabetical order.
事实上，并没有一个得到广泛认可的公约。我更喜欢编写同心CSS，其中我按照从框的外部到内部的顺序列出属性，以便我可以记住填充是在边框内部还是外部，等等。在这里阅读您的出色问题后，我意识到我对此有足够的信心来写一篇博客文章，所以如果您好奇的话，请看这里：
http://rhodesmill.org/brandon/2011/concentric-css/
请注意，流行的 盒模型约定 在某些情况下顺序错误。实际的 CSS 渲染是按照这个顺序进行的，从外到内：
这表明 CSS 的自然顺序：
“盒子模型约定”使用了这个相当奇怪的顺序：
There is, indeed, no widely agreed-upon convention. I prefer writing Concentric CSS where I list the properties in order from the outside of the box to its inside, so that I can remember whether the padding goes inside or outside the borders, and so forth. After reading your excellent question here, I realized that I felt strong enough about it to write a blog post, so here you are in case you're curious:
http://rhodesmill.org/brandon/2011/concentric-css/
Note that the popular Box Model Convention gets the order wrong in several cases. The actual CSS rendering goes in this order, from outside to inside:
Which suggests a natural ordering for your CSS:
The "Box Model Convention" instead uses this rather bizarre order:
没有广泛采用的约定。这两个示例之间没有区别，因此您应该选择您喜欢的约定。如果您确实必须满足大妖精的要求，请选择字母顺序或它影响盒子模型的顺序。
There is no widely adopted convention. There is no difference between either example, so you should choose the convention you prefer. If you must really satisfy the hobgoblins, choose alphabetical or the order it affects the box model.