概要
2021年2月時点でCSSの動向について軽く調査した時の記録です。
1. CSSクラス
CSS, SCSS, SASS等のファイルをwebpack等でCSSとして出力し、HTML上で読みこむ。
- メリット
SCSS, LESSが使える。覚えることが少なく簡単。
- デメリット
グローバルスコープにスタイルを追加していくのでクラス数が増えると管理が大変になる。
気づかぬままにスタイルを上書きし、別の画面に影響がでるなど。
BEMやOOCSSなどで規則をつけることで回避してきた歴史がある。
2. インラインスタイル
スタイルの文字列をJSオブジェクトにまとめて、style属性にそのまま対応させる方法。
部分的に利用する以外、公式で推奨されていない。
メリットの部分に書くが、動的にstyleを生成したい箇所には有効。
conststyle={color:red}exportdefault(props)=><buttonstyle={style}{...props}/>;
- メリット
styleを動的に生成することが可能。
これはCSSだけでは実現できない。
conststyle={color:color?color:red}- デメリット
:hoverなどの疑似要素が設定できない。
イベント発火時にJSで追加したりとやる必要がある。
3. CSS Modules
ローカルスコープ(ファイル内でのみ有効なスコープ)を持つCSSクラスをツールで生成する。
これにより、グローバルでクラス名の衝突が起きないようにする。
よく見る、「class="TQc1id rhstc4"」というようなやつ。
- メリット
スコープを気にせず、CSSとUIコンポーネントのコードを分離できる。
- デメリット
子コンポーネントのスタイルを親が上書きした場合、子と親のどちらのスタイルが適用されるかはビルド時のファイルの読み込み順により決定する場合がある。
暗黙的に上書きされている場合、ディレクトリ変更によりファイルの読み込み順が変わり、Cascadingの順序が変わることでスタイルが崩れる例がある。
この辺に注意しながら利用する必要がある。
上記の例ではBEM + PostCSSに移行している。(2019.05)
4. CSS in JS
インラインスタイルの持つ、疑似要素を設定できない等のデメリットを解消したライブラリ(styled-components, emotion等)を利用する方法。
- メリット
インラインスタイルと同様、styleを動的に生成することが可能。
CSSでよくあるmodifierのクラスが増える場面において、無駄にクラスを増やさずに済む。
.msg-base{font-size:10px;}.msg--err{background-color:red;}.msg--success{background-color:green;}素のCSSだと上記のように3クラス必要になるところが、以下のように1つのモジュールで完結する。
constmsg=styled.div`
font-size: 10px;
background-color: ${props=>props.color};
`- デメリット
JSの式が加わることによりかえって複雑になる場合がある。
CSSモジュールとうまく付き合うようにするか、BEMを使えばよいという意見も。
また、1つのファイルにまとまるのは簡潔でよいが、バージョン管理する場合、スタイルの変更と制御の変更が混ざる。
参考:
