現在のCSSに別のCSSを読み込ませる便利な機能 @import のサンプルです。
これにより、複数のCSSファイルにスタイルを分割して管理することができ、可読性や保守性が向上します。
代表的な３つの機能のみピックアップします。
@import url("another-style.css");@importを使ったシンプルな記述です。
@import "common.css" print, screen;パスの記述はダブルクォートで、フルパスでも相対パスでも可能です。
後述をprintのみすると印刷時のみ、screenのみするとブラウザ表示のみになります。
@import "headings.css" layer(default);layerで文字列をしてすると読まれたCSSはそのレイヤーのみに適用されます。
他にもいろいろな機能がありますが、上記だけでもCSSの管理をわかりやすく、分割でき、また余計な上書きを抑え、コンフリクトを防げると思います。
レイヤーについてのサンプルはこちらを参照ください。
サーバーサイドでif文を用いて出し分けるより、フロントの処理で対応できますが、ファイルの読み込みの処理速度は検討の余地がありそうです。
