CSS 框模型属性排序约定

2022-01-13 00:00:00 attributes css conventions

如果您想知道以什么顺序输入 CSS 属性，如 border、padding、font-family 等.两种常见的方法似乎是按字母顺序和盒子模型.(看:CSS 属性的常规顺序)

If you ever wonder in what order to enter your CSS attributes like border, padding, font-family, etc. Two common approaches seem to be Alphabetical and Box Model. (See: Conventional Order of CSS properties)

不要与选择器混淆(#id、.class、:hover、tagname)在这种情况下，顺序非常重要.

This not to be confused with selectors (#id, .class, :hover, tagname) in which case the order matters very much.

按字母顺序排列的选项对我来说没有多大意义.一方面，它将 padding 和 line-height 粘贴在 width 和 height 或 left 的中间 和 top.

The Alphabetical option does not make much sense to me. For one thing it sticks padding and line-height in the middle of width and height or left and top.

我将使用 来自 fordinteractive.com 的列表发布 CW 答案，该列表是由 jacobangel 提供.

I will post a CW answer with the list from fordinteractive.com which was provided by jacobangel.

非常好，但不完整.有一些项目丢失.我希望找出丢失的那些像 font-style 和 clip 这样的地方.

It is very nice, but it is not complete. There are a few items missing. I hope to find out where the missing ones go like font-style and clip.

这些新的应该在列表中的什么位置?是否还有其他遗漏?如果已经有针对同一件事的建议，请投票支持该评论，以表明您认为这是一个好主意.此外，可能还会有更多缺失.我希望这是一个完整的列表.如果有可以按此列表排序的工具或 IDE 功能也是一个好主意.

Where should these new ones go in the list? Are there any others that are missing? If there was already a suggestion for the same thing then vote for that comment to show you think it is a good idea. Also there will probably be more that are missing. I hope for this to be a complete list. It would also be a good idea if there was a tool or IDE feature that would sort by this list.

我发布此内容是因为在 Google 和 我所知道的是不完整的(我什至在谷歌上都找不到).我希望如果在其中编辑新的，我们将有一个每个人都可以遵循的完整列表.

I am posting this because there does not seem to be another page that can be found on Google and the one I do know of is incomplete (not even on Google that I could find). I expect that if new ones are edited in that we will have a complete list that everyone can follow.

推荐答案

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

Box Model Convention copied from http://fordinteractive.com/tools/propertyorder/propertyorder.css.

当发现列表中缺少添加项时，应进行编辑.请在您认为添加的地方发表评论，并在将它们添加到最终列表之前等待达成一致.

Additions should be edited in when they are found to be missing from the list. Please comment on where you think that additions and wait for some agreement before adding them to the final list.

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 应该去哪里?(除了带有 -moz-user-select 的 Mozilla 和带有 -webkit-user-select 的 Chrome 之外不支持.IE 使用 JavaScript onselectstart)
  • border-radius应该去哪里?(不支持，除了带有 -moz-border-radius 的 Mozilla 和带有 -webkit-border-radius 的 Chrome)

    • Where should clip go?
    • Where should user-select go? (not supported except by Mozilla with -moz-user-select and Chrome with -webkit-user-select. IE uses JavaScript onselectstart)
    • Where should border-radius go? (not supported except by Mozilla with -moz-border-radius and Chrome with -webkit-border-radius)

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

      Please comment if you have a suggestion as to where something should go.

相关文章