メンテナンスしやすい CSS コードを書くための 5 つのガイドライン

1. スタイルシートの先頭にコメントブロックを追加して、スタイルシートの作成日、作成者、タグ、その他のメモを記述します。

コードをコピー

コードは次のとおりです。

ソースコードの例:
/*
---------------------------------
サイト: サイト名
著者: 52CSS.com
更新日時
更新者: 名前
---------------------------------
*/

2. 公的なカラーマーキングを含む

コードをコピー

コードは次のとおりです。

ソースコードの例:
/*
---------------------------------
色
本文の背景: #def455
コンテナの背景: #fff
本文: #333
リンク: #00600f
訪問したリンク: #098761
ホバーリンク: #aaf433
H1、H2、H3: #960
H4、H5、H6: #000
---------------------------------
*/

3. IDとクラスに意味のある名前を付ける<br />推奨されない命名方法:
ソースコードの例:

コードをコピー

コードは次のとおりです。

.green-box { ... }
#大きなテキスト { ... }

推奨される命名規則:
ソースコードの例:

コードをコピー

コードは次のとおりです。

.pullquote { ... }
＃導入 {... }

4. 関連するスタイルルールを統合する
ソースコードの例:

コードをコピー

コードは次のとおりです。

#ヘッダー { ... }
#ヘッダー h1 { ... }
#ヘッダー h1 画像 { ... }
#ヘッダーフォーム{...}
#ヘッダー a#スキップ {...}
#ナビゲーション { ... }
#ナビゲーション ul { ... }
#ナビゲーション ul li { ... }
#ナビゲーション ul li a { ... }
#ナビゲーション ul li a:hover { ... }
＃コンテンツ { ... }
#コンテンツ h2 { ... }
#コンテンツ p { ... }
#content ul { ... }
#content ul li { ... }

5. スタイルに明確なコメントを追加する
ソースコードの例:

コードをコピー

コードは次のとおりです。

/*
---------------------------------
ヘッダースタイル
---------------------------------
*/
#ヘッダー { ... }
#ヘッダー h1 { ... }
#ヘッダー h1 画像 { ... }
#ヘッダーフォーム{...}
/*
---------------------------------
ナビゲーションスタイル
---------------------------------
*/
#ナビゲーション { ... }

<<: JS ES の新機能、変数分離割り当て

>>: get メソッドによる HTML フォームの値転送の例