ホームページ >ウェブフロントエンド >CSSチュートリアル >複数の CSS クラスを組み合わせてコードの重複を減らし、パフォーマンスを向上させるにはどうすればよいですか?
複数の CSS クラスのスタイルを結合する
CSS で複数の要素をスタイル設定する場合、コードの重複を最小限に抑えるために共通のプロパティを再利用することが望ましいです。指定されたシナリオでは、.abc クラスと .xyz クラスの両方が同じプロパティ、つまり margin-left:20px を共有します。
スタイルをマージするには、クラス名をカンマで区切ってプロパティを適用するだけです。
<code class="css">.abc, .xyz { margin-left:20px; }</code>
この更新されたルールは、margin-left プロパティを .abc クラスと .xyz クラスの両方に同時に効果的に適用します。したがって、繰り返されるコードは 1 つの簡潔な宣言に統合されます。
HTML の使用法:
マージされたクラスを使用すると、提供された HTML コードは次のように更新されます。
<code class="html"><a class="abc xyz">Lorem</a> <a class="xyz">Ipsum</a></code>
利点:
複数のクラスのスタイルを結合すると、いくつかの利点があります:
以上が複数の CSS クラスを組み合わせてコードの重複を減らし、パフォーマンスを向上させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。