コンポーネント的な構造で、CSSを作っています。
(下記のコードは、あくまで再現できる最小限のコードなので、コード的には意味はありません)
variable.css:
:root {
--background1: #333;
}
とう変数の定義の書かれたファイルを用意します。
この背景色は素朴に色なコンポーネントから使いたいとして
component1.css:
@import url("variable.css");
.component1 {
background-color: var(--background1);
}
component2.css:
@import url("variable.css");
.component1 {
background-color: var(--background1);
}
このように、各コンポーネントでインポートしていくと、HTML側で
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="component1.css">
<link rel="stylesheet" href="component2.css">
<title>Document</title>
</head>
<body>
<div class="component1">
aaaa
</div>
<div class="component2">
aaaa
</div>
</body>
</html>
このようにコンポーネントCSSを読み込んだところをChromeデベロッパーツールでみると下記画像のように、複数回読み込まれ、生き残った1つだけが使われてるようです。
この例は2つですが、もっと多いコンポーネント量で試してみると、読み込んだコンポーネントに応じて、読み込みと打つ消しが増えていました。
とても無駄に感じます。
これを防ぐにはSCSS等のメタ言語を導入するしかないのでしょうか?