きれいなCSSを書くためのゴールデンガイドライン-SitePoint

（この抜粋は、 cssマスター ティファニーブラウンによるもので、書店で入手可能です。

重要な概念：

幅広いセレクターを避けます： universal（ ）、要素（例えば、 、 * ）、または属性セレクター（例： p ）を使用する代わりに、クラスセレクターを好む軽量、再利用可能なCSSの場合。 これにより、競合が防止され、コード膨満が減少します button [type=checkbox] 優先順位付けタイプとクラスのセレクター（例えば、 ）またはクラスセレクターをチェーンする（例： ）を組み合わせることは避けてください。 これにより、再利用性と保守性が向上します 記述クラス名を使用してください： p.error ルールの目的または影響するコンテンツを明確に伝えるセマンティッククラス名を使用します（例： .message.warning 、 、 ）。これにより、設計変更に対するコードの理解と適応性が向上します マークアップからCSSを切り離す： 子ども（ ）、子孫（ ``）、または属性セレクターの代わりにクラスセレクターを利用してください。これにより、CSSの変更を必要とせずにマークアップの変更が可能になり、柔軟性が促進されます。 .alert .error .product-image クリーンなCSSのクラフト：ベストプラクティス これらのガイドラインは、軽量で再利用可能なCSSを促進します： > グローバルセレクターを拒否する： グローバルセレクタースタイルすべての一致する要素をサイト全体にスタイルします。 これは競合につながる可能性があり、バリエーションが必要なときに広範なオーバーライドが必要です。 クラスを使用すると、ターゲットスタイリングが可能です

特異性を最小限に抑える： 高特異性（複雑なセレクターから）は、スタイルをオーバーライドするのが難しくなります。 シンプルなクラスベースのセレクターが望ましいです。クラスのチェーンを避けてください。

セマンティッククラス名を抱きしめます： 視覚的なスタイルだけでなく、関数とコンテンツを説明する名前を選択します。これにより、デザインが進化するにつれて長寿が保証されます cssとマークアップを解除する：

クラスセレクターは柔軟性を提供します。 CSSを特定のマークアップ構造に結びつける子供または子孫のセレクターへの過度の依存を避けてください。 例：グローバルセレクターの回避

基本的なボタンスタイルを検討してください： 違うスタイルの「.close」ボタンが必要な場合、多数のスタイルをオーバーライドする必要があります。

より良いアプローチは、デフォルトのスタイルにクラスを使用することです： これにより、コードが削減され、競合が回避されます。

例：過度に特定のセレクターを回避

button { background: #FFC107; /* ... other styles ... */ } （特異性0,2,0）は、

（特異性0,1,0）よりも再利用できません。 後者は、任意の要素に適用できます。 .close { background: #e00; /* ... many overrides ... */ } 例：セマンティック対非セマンチックなクラス名

.red-text は、 .error-message よりも説明的ではありません。後者は目的をよりよく伝え、デザインが変更されても関連性があります。

CSSとマークアップの緊密な結合を回避

クラスセレクターを使用する（例えば、 ）により、子/子孫のセレクターとは異なり、CSS調整なしでマークアップの変更が可能になります。 .promo-headline

さらなる読み取りとリソース：

フィリップ・ウォルトンの「CSSアーキテクチャ」 ハリー・ロバーツのCSSガイドライン ニコラス・ギャラガーの「HTMLセマンティクスとフロントエンドアーキテクチャについて」 きれいなcssに関するよくある質問（FAQ）： このセクションには、提供されたFAQへの回答が含まれ、簡潔さと明確さのために言い換えられ、元の意味を維持します。 長さのため、このセクションを省略しました。 あなたが私にそれを含めてほしいかどうか教えてください。

きれいなCSSを書くためのゴールデンガイドライン-SitePoint

関連記事