blocks|key|1784821|text|我看过几个指南，说它们应该按字母顺序排列。那么，你的第二个例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1784822|有像CleanCSS这样的工具可以帮你按字母顺序排列它们。|offset|length|1784823|entityMap|0|LINK|mutability|MUTABLE|url|http://www.cleancss.com/^0|0|2|8|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

I've seen several guides that say they should be in alphabetic order. So, your second example.

There are tools like <a href="http://www.cleancss.com/" rel="nofollow">CleanCSS</a> that can alphabetize them for you.

blocks|key|4531801|text|没有被广泛采用的惯例。这两个示例之间没有区别，因此您应该选择您喜欢的约定。如果你真的要满足地精，选择字母顺序或它影响盒子模型的顺序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4531802|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1784849|text|我不相信属性的顺序会对最终结果有任何影响，除非有两个类似的属性被称为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1784850|border:1px+solid+#000;
border-top:none;|code-block|syntax|javascript|1784851|对比|1784852|border-top:none;
border:1px+solid+#000;|1784853|除此之外，任何你觉得最容易阅读的东西都是最好的选择。我按字母顺序列出它们，因为这往往会将相似的属性组合在一起。|1784854|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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

<pre><code>border:1px solid #000;
border-top:none;
</code></pre>

versus

<pre><code>border-top:none;
border:1px solid #000;
</code></pre>

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.

blocks|key|1782056|text|我通常将属性按字母顺序排列，这样当您搜索包含许多属性的大量填充的CSS规则时，会更容易找到您要查找的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1782057|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|864796|text|不怎么有意思。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|864797|但按字母顺序排序和/或分组字体规则和框/布局规则是有意义的。你的代码会更清晰。|864798|示例：|864799|/*+font+*/
color:+blue;+font-size:+12px;+word-wrap:+break-word;
/*+layout+*/
border:+1px+solid+red;+border-bottom:+none;+margin-top:+6px;+padding:+4px+6px;|code-block|syntax|javascript|864800|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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:

<pre><code>/* font */
color: blue; font-size: 12px; word-wrap: break-word;
/* layout */
border: 1px solid red; border-bottom: none; margin-top: 6px; padding: 4px 6px;
</code></pre>

blocks|key|864818|text|CSS的主要排序问题是类的顺序，而不是属性的顺序。由于样式表是级联的，所以越具体的样式表将胜出。我倾向于按字母顺序分组，可能的例外是属于一起的类似属性，而不考虑字母顺序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|864819|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|864854|text|没有固定的标准。有些人的偏好取决于他们的强迫症水平。我喜欢先做高/宽，然后是定位、颜色等。我见过有人开玩笑说，公司的CSS是根据字符数排序的。至少我觉得他们是在开玩笑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|864855|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|4532045|text|事实上，没有一个得到广泛认可的惯例。我更喜欢编写同心CSS，其中我按照从框的外部到内部的顺序列出属性，这样我就可以记住填充是在边界内还是在边界外，等等。在阅读了你在这里的精彩问题后，我意识到我觉得自己足够强大，可以写一篇博客文章，所以如果你好奇的话，这里有你：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|4532046|http://rhodesmill.org/brandon/2011/concentric-css/|4532047|请注意，在几种情况下，流行的Box+Model+Convention+的顺序是错误的。实际的CSS呈现是这样的，从外到内：|4532048|%2B-------------------%2B
%7C+++++++++++++++++++%7C
%7C++++++margin+++++++%7C
%7C+++++++++++++++++++%7C
%7C++%2B---border----%2B++%7C
%7C++%7C+++++++++++++%7C++%7C
%7C++%7C(background++%7C++%7C
%7C++%7C++++color)+++%7C++%7C
%7C++%7C+++++++++++++%7C++%7C
%7C++%7C+++padding+++%7C++%7C
%7C++%7C+++++++++++++%7C++%7C
%7C++%7C++%2B-------%2B++%7C++%7C
%7C++%7C++%7C+height%7C++%7C++%7C
%7C++%7C++%7C+++×+++%7C++%7C++%7C
%7C++%7C++%7C+width+%7C++%7C++%7C
%7C++%7C++%2B-------%2B++%7C++%7C
%7C++%2B-------------%2B++%7C
%2B-------------------%2B|code-block|syntax|javascript|4532049|这为你的CSS提供了一个自然的排序方式：|4532050|margin+/+border+/+background+/+padding+/+height+×+width|4532051|取而代之的是，“盒子模型约定”使用了这个相当奇怪的顺序：|4532052|height+×+width+/+margin+/+padding+/+border+/+background|4532053|entityMap|0|LINK|mutability|MUTABLE|url|1|http://fordinteractive.com/tools/propertyorder/propertyorder.css^0|O|5|0|0|1E|0|0|Z|1|E|K|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|H|3|I|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|J|3|K|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1J|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1K|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1L|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|1M|8|@]|D|@]|E|$M|N]]|$1|W|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|G]]|13|$5|Z|10|11|E|$12|14]]]]

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:

<a href="http://rhodesmill.org/brandon/2011/concentric-css/" rel="noreferrer">http://rhodesmill.org/brandon/2011/concentric-css/</a>

Note that the popular <a href="http://fordinteractive.com/tools/propertyorder/propertyorder.css" rel="noreferrer">Box Model Convention</a> gets the order wrong in several cases. The actual CSS rendering goes in this order, from outside to inside:

<pre><code>+-------------------+
| |
| margin |
| |
| +---border----+ |
| | | |
| |(background | |
| | color) | |
| | | |
| | padding | |
| | | |
| | +-------+ | |
| | | height| | |
| | | × | | |
| | | width | | |
| | +-------+ | |
| +-------------+ |
+-------------------+
</code></pre>

Which suggests a natural ordering for your CSS:

<pre><code>margin / border / background / padding / height × width
</code></pre>

The "Box Model Convention" instead uses this rather bizarre order:

<pre><code>height × width / margin / padding / border / background
</code></pre>

blocks|key|4532113|text|下面是我如何做的，我认为这在逻辑排序方面是最有意义的。秘诀是顶部的三个属性。在80/20分析方面，了解这三个可以帮助我确定其余样式中发生了什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4532114|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:+++++++++++
}|code-block|syntax|javascript|4532115|在这里你可以看到特别是“†-image”和"font-family"，我也倾向于从具有长字符串的值的属性开始这些部分。我认为它是这些部分之间的天然分隔符。|4532116|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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.

<pre><code>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: 
}
</code></pre>

† 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.

Is there a standard guideline of what order the CSS properties should be in? This would be to decide if I should use this code

<pre><code>p {font-size: 14px; color: purple}
</code></pre>

or this code instead

<pre><code>p {color: purple; font-size: 14px}
</code></pre>

<h3>Edit</h3>

I am now using <a href="http://fordinteractive.com/tools/propertyorder/propertyorder.css" rel="noreferrer">The CSS Box Model Convention</a>

Conventional Order of CSS properties

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

对于CSS属性的顺序，有没有标准的指导原则？这将决定我是否应该使用此代码p {font-size: 14px; color: purple}或者使用下面的代码p {color: purple; font-size: 14px}编辑我现在使用的是

问CSS属性的常规顺序
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS属性的常规顺序EN