CSS Box模型属性排序约定

Question

如果你以什么顺序输入你的CSS属性纳闷像border,padding,font-family,等两种常见的方法似乎是字母和盒状模型.(参见: CSS属性的常规顺序)

这不与选择(相混淆#id,.class,:hover,tagname在这种情况下,为了事项非常多).

字母顺序选项对我来说没什么意义.一方面它坚持padding并line-height在中间width和height或left和top.

我将使用jacobangel提供的fordinteractive.com 列表发布CW答案.

这是非常好的,但它并不完整.有一些项目丢失了.我希望找出失踪人员去的地方font-style和clip.

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

我发布这个是因为似乎没有其他页面可以在谷歌找到,而我所知道的那个页面是不完整的(甚至在谷歌上我都找不到).我希望如果编辑新的,我们将有一个完整的列表,每个人都可以遵循.

Answer 1

Box Model Convention复制自http://fordinteractive.com/tools/propertyorder/propertyorder.css.

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

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)

如果您对应该去哪里有建议,请发表评论.