Question

如果您想知道以什么顺序输入CSS属性，例如border，padding，font-family等。两种常见的方法似乎是按字母顺序排列和框模型。（看到： Conventional Order of CSS properties）

这不要与选择器（#id，.class，:hover，tagname混淆，在这种情况下，订单非常重要。

字母顺序选项对我来说没什么意义。首先，它将padding和line-height粘贴在width和height或left和top的中间。

我将使用list from fordinteractive.com提供的jacobangel发布CW答案。

非常好，但还不完整。有一些项目丢失了。我希望找出遗失的地方font-style和clip。

这些新的应该放在列表中的哪个位置？还有其他人失踪吗？如果已经有同样的建议，那么投票给该评论，表明你认为这是一个好主意。也可能会有更多缺失的东西。我希望这是一个完整的清单。如果有一个工具或IDE功能可以按此列表排序，那也是一个好主意。

我发布这个是因为似乎没有其他网页可以在Google上找到而且the one I do know of不完整（甚至在我找不到的Google上也是如此）。我希望如果编辑新的，我们将有一个每个人都可以关注的完整列表。

Answer 1

从http://fordinteractive.com/tools/propertyorder/propertyorder.css复制了Box Model Convention。

如果发现列表中缺少添加内容，则应对其进行编辑。在将它们添加到最终列表之前，请评论您认为添加的位置并等待某些协议。

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

clip应该去哪里？
user-select应该去哪里？（不支持Mozilla -moz-user-select和Chrome -webkit-user-select。IE使用JavaScript onselectstart）
border-radius应该去哪里？（除了Mozilla -moz-border-radius和Chrome -webkit-border-radius）

如果你有关于应该去哪里的建议，请发表评论。

Answer 2

有意义的是：

将具有相似功能的属性（例如height和width或clear和float）分组，因为如果我们更改一个属性的值，我们通常会更改该值该组中的其他财产也是如此。
对属性组进行排序，使其处于决策顺序。例如position之前的float，因为如果我选择position: absolute，则float将无关紧要。

CSS Box模型属性排序约定

2 个答案: