次世代インラインスタイル - yuhei blog

ユーティリティファーストCSSは実質的にインラインスタイルであり、本来はインラインスタイル的な記述ができる方がより望ましいように思えるが、おもに次のような制約によりユーティリティファーストとして体を成している： インラインスタイルでは、疑似クラス・疑似要素・子孫セレクタ・@mediaをはじめとする@-規則などが利用できない インラインスタイルは多くのエディタでうまく補完されない デザイントークンを参照できない（あるいはしづらい） 一方でいくつかのCSS in JSライブラリは別のアプローチを選択することでこれらの制約を回避しており、また比較的新しいCSSネイティブの機能の利用によっても解決できるようになってきた。ユーティリティファーストを完全に置き換えられるわけではないにしても、それらの代替案を検討できる場面もあるだろう。 CSS in JSのアプローチ たとえばEmotionでは、通常の