Question

CSS属性应该采用什么顺序的标准指南？这将决定我是否应该使用此代码

p {font-size: 14px; color: purple}

或此代码

p {color: purple; font-size: 14px}

修改

我现在正在使用The CSS Box Model Convention

Answer 1

事实上，没有广泛认可的公约。我更喜欢编写同心CSS ，其中我从框的外部按顺序列出属性，以便我可以记住填充是在边框内部还是在边框之外，等等。在这里阅读了你的优秀问题之后，我意识到我对写博客文章感到非常强烈，所以在这里你以防万一你好奇：

http://rhodesmill.org/brandon/2011/concentric-css/

请注意，在某些情况下，受欢迎的Box Model Convention 订单错误。实际的CSS渲染按顺序排列，从外到内：

+-------------------+
|                   |
|      margin       |
|                   |
|  +---border----+  |
|  |             |  |
|  |(background  |  |
|  |    color)   |  |
|  |             |  |
|  |   padding   |  |
|  |             |  |
|  |  +-------+  |  |
|  |  | height|  |  |
|  |  |   ×   |  |  |
|  |  | width |  |  |
|  |  +-------+  |  |
|  +-------------+  |
+-------------------+

这表明CSS的自然顺序：

margin / border / background / padding / height × width

“Box Model Convention”改为使用这个相当奇怪的顺序：

height × width / margin / padding / border / background

Answer 2

没有广泛采用的惯例。两个示例之间没有区别，因此您应该选择您喜欢的约定。如果你必须真正满足大地精，请选择按字母顺序或它影响盒子模型的顺序。

Answer 3

我不相信属性的顺序会对最终结果产生任何影响，除非调用两个相似的属性，如

border:1px solid #000;
border-top:none;

与

border-top:none;
border:1px solid #000;

除此之外，无论你发现什么，最容易阅读都是最好的选择。我按字母顺序列出它们，因为它们倾向于将属性组合在一起。

Answer 4

我见过几位指南说他们应该按字母顺序排列。那么，你的第二个例子。

像CleanCSS这样的工具可以为您按字母顺序排列它们。

Answer 5

我通常按字母顺序排列属性，这样当你搜索人口众多的CSS规则时，它会更容易找到你想要的东西。

Answer 6

不是。

但按字母顺序和/或组字体规则和框/布局规则排序是有意义的。你的代码会更清楚。

示例：

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

Answer 7

CSS的主要排序问题是类的顺序，而不是属性。由于样式表级联，更具体的样式表将获胜。我倾向于按字母顺序按字母顺序进行分组，可能的例外情况是属于同一属性，不管字母顺序如何。

Answer 8

没有固定的标准。有些人根据他们的强迫症水平有偏好。我喜欢先做高度/宽度然后定位，颜色等。我见过人们开玩笑说公司的CSS根据字符数排序。至少我认为他们在开玩笑。

Answer 9

这就是我的操作方式，我认为这在逻辑顺序方面最有意义。秘制酱是顶部的三个属性。在80/20分析方面，了解这三种可以帮助我确定其余样式的情况。

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:           
}

†在这里尤其可以看到“ background-image”和“ font-family”，我也倾向于从这些部分开始，这些属性的值带有长字符串。我认为它是这些部分之间的自然分隔符。

常规CSS属性顺序

修改

9 个答案: