CSSボックスモデル属性注文規約

Question

border、padding、font-familyなどのCSS属性を入力する順序が不思議なら、アルファベット順とボックスモデルの2つの方法が考えられます。 （参照： Conventional Order of CSS properties）

セレクタ（#id、.class、:hover、tagname）と混同しないように、この、その場合には順序が重要非常に。

アルファベット順のオプションはあまり意味がありません。一つには、それはwidthとheightまたはleftとtopの真ん中にpaddingとline-heightスティック。

私はjacobangelによって提供されたlist from fordinteractive.comとCW答えを投稿します。

非常にいいですが、完全ではありません。欠落しているアイテムがいくつかあります。私は欠けているものがどこに行くのかを調べることを願っていますfont-styleとclip。

これらの新しいものはどこにリストされますか？見つからないものはありますか？同じことについて既に提案があった場合は、そのコメントに投票して、それが良い考えだと思っていることを示してください。おそらく、欠けているものがもっとあるでしょう。私はこれが完全なリストであることを願っています。また、このリストでソートするツールやIDE機能があれば良い考えです。

Googleで見つけられる別のページがないようで、the one I do know ofが不完全なので（私が見つけることができるGoogleでさえも）、投稿しています。私は、新しいものが編集されれば、誰もが従うことができる完全なリストを得ることを期待しています。

Answer 1

ボックスモデル条約はhttp://fordinteractive.com/tools/propertyorder/propertyorder.cssからコピー。

追加は、それらがリストから欠落していることが判明しているときで編集する必要があります。その追加情報がどこにあると思うかについてコメントし、最終的なリストに追加する前にいくつかの合意を待ってください。 clip行くべき

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

• ？
• user-selectはどこですか？ （-moz-user-selectのMozillaを除くと、-webkit-user-selectのChromeを使用しています。IEはJavaScriptを使用していますonselectstart）
• border-radiusはどこに行きますか？ （-webkit-border-radiusと-moz-border-radiusとChromeとMozillaの以外によってサポートされていません）

あなたは何かが行くべき場所へと提案がある場合はコメントしてください。

Answer 2

それは理にかなって：私たちは1つのプロパティの値を変更した場合、私たちは多くの場合で、他のプロパティの値を変更するため

• グループ同様の機能（のようなheightとwidthまたはclearとfloat）とプロパティグループも。
• 決定グループの順序でプロパティグループを並べ替えます。例えばの前にfloatと入力してください。position: absoluteを選択した場合、floatは無関係です。