1. タブの代わりに 2 つのスペースを使用します - これが、すべての環境で一貫したプレゼンテーションを保証する唯一の方法です。
2. セレクターをグループ化する場合は、個々のセレクターを別の行に配置します。
3. コードを読みやすくするために、各宣言ブロックの左中括弧の前にスペースを追加します。
4. 宣言ブロックの閉じ中括弧は別の行に置く必要があります。
5. 各宣言文の : の後にスペースを挿入する必要があります。
6. より正確なエラー報告を行うには、各ステートメントを個別の行に配置する必要があります。
7. すべての宣言ステートメントはセミコロンで終わる必要があります。最後の宣言ステートメントの後のセミコロンはオプションですが、省略するとコードでエラーが発生しやすくなる可能性があります。
8. カンマで区切られた属性値の場合は、各カンマの後にスペースを挿入する必要があります (例: box-shadow)。
9. rgb()、rgba()、hsl()、hsla()、rect() 値内のカンマの後にスペースを挿入しないでください。これは、複数の色の値 (カンマのみ、スペースなし) と複数の属性値 (カンマとスペースの両方を追加) を区別するのに役立ちます。
10. 属性値または色のパラメータでは、1 未満の小数の先頭の 0 を省略します (たとえば、0.5 の代わりに .5、-0.5px の代わりに -.5px)。
11. 16 進値はすべて小文字にする必要があります (例: #fff)。小文字は、その形が区別しやすいため、原稿をスキャンするときに読みやすくなります。
12. 短縮された 16 進値を使用してください。たとえば、#ffffff の代わりに #fff を使用します。
13. セレクターの属性に二重引用符を追加します (例: input[type="text"])。場合によってはオプションですが、コードの一貫性を保つために二重引用符を使用することをお勧めします。
14. 0 の値に単位を指定するのは避けてください。たとえば、margin: 0px; の代わりに margin: 0 を使用します。
/* CSS が不正です */
.selector,.selector-secondary,.selector[type=text] {
padding:15px;
margin:0px0px15px;
background-color:rgba(0,0, 0,0.5);
box-shadow:0px1px2px#CCC,inset01px0#FFFFFF
}
/* 良い CSS */
.selector,
.selector-secondary,
.select or[type = "テキスト"] {
パディング:15px;
margin-bottom:15px;
背景色: rgba(0,0,0,.5);
box-shadow:01px2px#ccc,inset01px0# fff ;
}
1.2. 宣言の順序Positioning
Typographic
Visual
普通のドキュメント フローに適用され、ボックス モデル関連のスタイルもオーバーライドされるため、最初に指定されます。ボックス モデルが 2 番目に来るのは、コンポーネントのサイズと配置が決定されるためです。
他のプロパティはコンポーネントの内部にのみ影響を与えるか、プロパティの最初の 2 つのグループに影響を与えないため、後ろにランクされます。
.declaration-order {
/* 位置決め */
位置:絶対;
上:0;
右:0;
下:0;
左:0;
z-index: 100;
/* ボックスモデル */
display:block;
float:right;
width:100px;
height:100px;
/* タイポグラフィ */
フォント: Normal13px"HelveticaNeue",sans-serif;
line-height:1.5;
color:#333;
text-align:center;
/* Visual */
background-color:#f5f5f5;
border:1pxsolid#e5e5e5;
border-radius:3px;
/* その他 */
opacity:1;}
1.3 @import
を @import コマンドと比較すると、このコマンドは非常に遅いため、追加のリクエストの数が増加するだけでなく、予期しない問題が発生します。代替案には次のようなものがあります:
複数の 要素を使用する
Rails、Jekyll、またはその他のシステムが提供する CSS ファイル結合機能を使用する
