HTMLページと対応するCSSファイルがあると仮定します。いくつかの要素に丸みを帯びた角を追加したいと思います。1つおきのセクションで背景色を変えたい。セクション見出しごとにホバー状態を追加したいと思います。などなど-私はスタイリングとスタイリングとスタイリングを続けています。
クラス別、ID別、階層別のマークアップでCSSルールを配布する「誰が、何を、いつ、どこで、なぜ、どのように」という3つの極端なことが思い浮かびます。
極端な＃1：すべてのスタイルルールはIDに基づいています。
極端な＃2：すべてのスタイルルールはクラスに基づいています。
極端な＃3：すべてのスタイルルールはDOM階層に基づいています。
明らかに、フロントエンドWeb開発の禅には、クラスの再利用、一意のルール、階層の健全なバランスが含まれます。これは、3つの極端な例のいずれかが、ブラウザーのパフォーマンス、保守性、およびコードサイズに大きな打撃を与えるためです。おもう。それとも私は間違っていますか？新しい.classものがいつ必要かを判断する方法、または適用したいスタイルルールを既存の定義に安全に組み込むことができますか？二人はいつ#id共通のコードをクラスに引き出す必要があるほど類似したルール？クラスを「フォーク」するとき（元の状態を維持し、すべての逸脱した状況の派生を追加するとき（OOP用語で「パーコレーション」）するとき、およびいくつかの互いに素な逸脱のそれぞれに共通のルールをプッシュするとき-明らかにこれは偏差自体の性質（つまり、関係するルールの数））。純粋に階層的なルールを使用する状況はありますか？
質問：この種の議論を支配する経験則はありますか？あなたの経験やアドバイスは何ですか？優れた記事、リソース、本、講義（「テックトーク」スタイルのビデオのボーナスポイント）、またはこのトピックに関するその他のコンテンツはありますか？いくつかの重要なポイントに基づいて議論を続けたいと思います（ただし、コメントは歓迎します）。順不同です。
- 保守性（コードの読み取り、変更、追加のしやすさ）
- DRY（繰り返さないでください）
- 時間効率（オンロードまでの時間、プログレッシブレンダリング）
- スペース効率（マークアップと関連するスタイルの合計サイズ）