1. スタイルシートの先頭にコメントブロックを追加し、スタイルシートの作成日、作成者、タグなどの備考情報を記述します。
| ソースコードの例: /* ---------------------------------- サイト: サイト名 著者: 52CSS.com 更新日: 日付と時刻 更新者: 名前 ---------------------------------- */ |
2.共通カラーマーキングを含む
| ソースコードの例: /* ---------------------------------- 色 ボディの背景: #def455 コンテナの背景: #fff 本文: #333 リンク: #00600f 訪問したリンク: #098761 ホバーリンク: #aaf433 H1、H2、H3: #960 H4、H5、H6:#000 ---------------------------------- */ |
3. ID と Class にわかりやすい名前を付けます。
推奨されない命名方法:
| ソースコードの例: .green-box { ... } #ビッグテキスト { ... } |
推奨される命名方法:
| ソースコードの例: .pullquote {... } ＃導入 {... } |
4. 関連するスタイルルールを統合する
| ソースコードの例: #ヘッダー { ... } #ヘッダー h1 { ... } #header h1 img { ... } #ヘッダーフォーム { ... } #ヘッダー a#スキップ { ... } #ナビゲーション { ... } #ナビゲーション ul { ... } #ナビゲーションウリ { ... } #navigation ul li a { ... } #navigation ul li a:hover { ... } ＃コンテンツ { ... } #コンテンツ h2 { ... } #コンテンツ p { ... } #contentul { ... } #contentulli { ... } |
5. スタイルに明確なコメントを追加する
| ソースコードの例: /* ---------------------------------- ヘッダースタイル ---------------------------------- */ #ヘッダー { ... } #ヘッダー h1 { ... } #header h1 img { ... } #ヘッダーフォーム { ... } /* ---------------------------------- ナビゲーションスタイル ---------------------------------- */ #ナビゲーション { ... } |