CSS_Experience 交換では継承を減らし、より多くの組み合わせを使用します

以下は一般的なコードです:
css:

コードをコピー コードは次のとおりです:

.box{
ボーダー:1px ソリッド #ccc;
フォントサイズ:12px;
背景:#f1f1f1;
パディング:10px;
}
div> html:

コードをコピー コードは次のとおりです:

これはグレーのボックスです

しかし、現時点では需要が高まっています。ページにはグレーのボックスだけでなく、青いボックス、そしておそらく緑のボックスです。通常は統合を使用することになるので、次の変更を加えましょう。
css:

コードをコピー コードは次のとおりです。

.box-gray,
.box-green{
border:1px Solid #ccc;
font-size: 12px;
padding:10px;
}
.box-gray{background:#f1f1f1}
.box-green{background:#66ff66}

HTML :

コードをコピー コードは次のとおりです。

これはグレーのボックスです

これは緑のボックスです

しかし、今回はニーズが再び変更されました。ルートはアプリケーションとは異なります。一部のボックスを使用する必要があります。サイズ 12 フォント、一部はサイズ 14 フォント、一部は 10 ピクセル、一部は 20 ピクセルです。頭は次のようになると推定されます。継承した CSS コードを使用する場合は非常に複雑になるため、方法を組み合わせて解決できるか実験してみましょう。
css:

コードをコピー コードは次のとおりです:

.fs- 12{font -size:12px}
.fs-14{font-size:14px}
.pd-10{padding:10px}
.pd-20{padding:20px}
.box{
border:1px Solid #ccc;
}
.box.gray{background:#f1f1f1}
.box.green{background:#66ff66}
div>HTML

コードをコピー コードは次のとおりです。

これはグレーの fontsize12px padding20px ボックスです

これはグレーの fontsize14px padding10px ボックスです

div>
….
それらのいくつかを見てみましょう。クラスで参照されているものはいくつかありますが、コードとロジックは非常に明確で、保守が非常に簡単です。自由に組み合わせたり、拡張したりできます。このように、「組み合わせ」という手法は自明の理ではありますが、完璧ではありません。組み合わせを分割する際は、あまりやりすぎると逆効果になる場合がありますので、組み合わせの継承を適切に使用することでのみ可能です。私たちのコードはもっとエレガントで芸術的です。