マークアップ/スタイルのベストプラクティス：CSSクラスでスタイルルールを効率的に配布する方法

Question

私はいくつかのHTMLページと対応するCSSファイルを持っていると仮定します。いくつかの要素に丸みのあるコーナーを追加したいと思います。他のすべてのセクションで背景色を交互にしたい。私は各セクション見出しにホバー状態を追加したいと思います。それでは、私はスタイリングとスタイリングとスタイリングを続けています。

CSSルールをクラス、ID、および階層別にマークアップに配布する "誰が、何を、いつ、どこで、なぜ、どのように"懸念するのか3つの極端な点があります。

エクストリーム＃1：すべてのスタイルルールはIDに基づいています。

エクストリーム＃2：すべてのスタイルルールはクラスに基づいています。

エクストリーム＃3：すべてのスタイルルールはDOM階層に基づいています。

フロントエンドWeb開発の禅には、クラスの再利用と階層対固有のバランスのよいバランスが含まれていることは明らかです。この3つの極端な点のいずれかはブラウザのパフォーマンス、保守性、コードサイズに大きな影響を与えるためです。おもう。または私は間違っていますか？新しい.classが必要なとき、または適用したいスタイルルールがいつに安全になるかを知るには既存の定義に靴ひだがついていますか？ 2つの#idルールは、共通のコードをクラスに引き出すのに十分なほど類似していますか？いつあなたはクラスをフォークするか（時にはオリジナルを保持し、すべての逸脱した状況（OOP用語では "percolate"）に派生物を追加し、いくつかのばらばらの偏差のそれぞれに共通のルールを適用します。偏差そのものの性質（すなわち、関係する規則の数））。純粋に階層的なルールを使用するだけの状況はありますか？

質問：この種の討論を支配するルールはありますか？あなたの経験やアドバイスは何ですか？良い記事、リソース、本、講義（「tech talk」スタイルのビデオのボーナスポイント）、またはトピックで利用可能な他のコンテンツはありますか？私は（任意のコメントは歓迎ですが）順不同で、いくつかの重要なポイントに接地された議論を維持したいと思います：

• 保守性を（読みやすさ、変更、追加コード）
• DRY（プログレッシブレンダリング）
• スペース効率（マークアップ&関連するスタイルの合計サイズ）

Answer 1

が自分に好意を行い、C;）までの時間のonload

時間効率を（自分を繰り返してはいけませんくそーSASS。

CSSをコンパイルする際の賛否両論はありますが、コンパイル済みのCSSに実際の変数、ミックスイン、ヘルパーを持たせることは、少なくとも考慮に値するものです。