CSS ルールを直接参照せずに再利用するにはどうすればよいですか?

CSS ルールの参照: ルール再利用の技術をわかりやすく理解する

CSS にはコードの再利用性が組み込まれていますが、コード内の 1 つのルールセットを直接参照する機能も含まれています。もう一つはとらえどころのないままです。ただし、同様の効果を達成し、コードの効率を維持する別の方法もあります。

以下の例では、

<div class="someDiv"></div>

.opacity { filter: ... }
.radius { ... }

不透明度と半径スタイルの両方を適用するという課題に遭遇します。

ルールを参照する代わりに、複数のセレクターを再利用できます。ルールセット:

.opacity, .someDiv { ... }
.radius, .someDiv { ... }

このアプローチでは、両方のルール セットを someDiv 要素に適用します。

または、単一のルール セットで複数のセレクターを使用できます:

.opacity.radius { ... }

このアプローチでは、HTML 要素に複数のクラスを追加する必要があります:

<div class="opacity radius"></div>

コードを拡張するには明確にするために、要素の外観ではなく目的を説明するクラス名を使用することをお勧めします。スタイルの詳細を CSS スタイルシート内に保持して、懸念事項を分離し、柔軟性を維持します。

以上がCSS ルールを直接参照せずに再利用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。