コーディングを始めた時から作ってきたMUSUBiiというCSSフレームワークのおかげで、今の制作は安定している。SCSS変数でほとんどの値を改変できるようにしたのもあり、多様な案件に対応しやすい。

次のレベルに上げるならCSS Variablesの採用だろうか。例えば、ダークモードを作る場合に、詳細度が高いCSSでオーバーライドしたくない。

CSS Variables採用のフレームワークを探したら、コア設計に組み込んでいる人がいた。Mediumでダークモードについて書いてるし。参考にしようと思う。

• Teutonic CSS
• fortrabbit/teutonic-css
• How to get dark mode working with CSS

ちなみにCSS Variablesのブラウザ対応状況は、IEがダメ。Android 4.4も標準ブラウザだと多分使えない。

• Can I use... CSS Variables (Custom Properties)

IEに対応させるのであれば、ponyfillの css-vars-ponyfill が良さそうだった。レガシー判定してCSS Variablesの部分だけHeadにインラインスタイル書き出すような設定ができる。

• jhildenbiddle/css-vars-ponyfill

CSS Variablesを使うとSVG・React・Vueでやれることが増えそう。採用するときは、MUSUBiiに組み込むか、完全に新規で作るかを考える。

SCSSをやめる → CSS Variablesのみ。コンパイル無しってパターンでも良さそう。最小限の構成で成り立っているフレームワーク見て思った。

以下はビルド用に postcss 使っているけれど、ReactやVueでコンポーネントとして呼び出すならコンパイル意識しなくて済みそう。

• chota - A micro CSS framework
• jenil/chota

新しいCSSフレームワークを作り始めた。MUSUBiiとはブラウザサポートへのスタンスが違うから、別で作って行くことになりそう。

というわけで作り始めて見たものの、メディアクエリでつまづいた。どうやら、以下のようにCSS Variablesをプロパティ値以外に使うのはダメらしい。

@media screen and (min-width: var(--screen-width-fablet)) {
  .section > .inner {
    width: var(--section-inner-width-fablet);
  }
}

草案は進んでいるものの、現状では生のCSSのみで完結させるは厳しそう。Bootstrapのドキュメントにも似たような話が書いてあった。

• CSS native variables not working in media queries - Stack Overflow
• CSS Environment Variables | CSS-Tricks
• Breakpoint variables · Bootstrap

結局、プリプロセッサーが必要になったため、MUSUBii（SCSS）寄りの派生新規、もしくはMUSUBiiにCSS Variables版をインクルードする方向で制作を進めることにした。