❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

BEM×SASSってもう古いの??モダンCSSを試してみる(styled-components編)

テクニック

BEM×SASSってもう古いの??モダンCSSを試してみる(styled-components編)

最近のフロントエンジニア界隈では、React.jsやVue.jsなどのJavaScriptフレームワークによるコーディングが一般的になって久しいようですが、CSSを取り巻く事情も、変化してきています。

Learn to become a modern frontend developer ←2021年時点でこちらのフロントエンド開発のロードマップを見ると、数年前に一般的になっていたBEMやSASSが必然ではなくなり、モダンCSS(CSS in JS)の習得が推奨されていることがわかります。

Learn to become a modern frontend developer より
Learn to become a modern frontend developer より

そういえば、技術系の記事でこういうの最近見かける機会が増えてきたなというのは感じていましたが、このまま習得せずに進むのはまずいと思い、モダンCSSというものを試してみることにしました。

ちなみにここで紹介されていたモダンCSSには、styled-componentsCSS ModuleStyled JSX、そして最近人気が出つつあるらしいEmotionが含まれていました。

試してみた感想をレポートしてみたいと思います。
まずは、ReactのCSS in JSで一番使われているらしいstyled-componentsを試してみました。

↓試しに作ってみたもの
DEMO

CSS in JSを使う意味

CSS in JSを使う意味の主なものとしては、
メンテナンス性の向上と、パフォーマンスの向上があると思います。

JavaScriptフレームワークでは、コンポーネント単位でソースを管理することが一般的ですが、その場合、CSSを別管理でひとまとめにするよりも、コンポーネントとセットで管理したほうが、CSSの記述箇所が見つけやすく、メンテナンス性が高くなります。

また、CSS in JSを使うと、表示中の要素だけCSSを書き出し、不要なCSSを書き出さないという処理が可能になるので、パフォーマンス性が上がり、SEOの評価も上がります。

styled-componentsの使い方

インストール

JSX or TSXファイルへのインポート

StyledComponentの作成とコンポーネントへの配置

styled.HTMLタグ名CSSコード の形式でスタイルのついたコンポーネントを作成できます。
既存のコンポーネントに後付でスタイルを当てたい場合は、

のように、styled(コンポーネント名)CSSコード の形式で記述できます。

ご覧のように、CSSコードの記述はSASSと同じネストによる記述が可能ですので、SASSに慣れた人にとっては馴染みやすいと思います。

コンポーネントの状態と連動させる

CSSコード内の${}の中で出し分けの記述をすることにより、要素に渡した属性の状態からCSSの切り替えを行うことができます。JavaScriptの値と直接連動するので、意図しない動作などを避けられそうです。

BEM×SASSと比べた感想

BEMでは、単一のclass名をつけるために、どういう名前にするかよく迷いますが、styled-componentsでは、スコープがあり、コンポーネント内であればスタイルのために単一のclass名を付ける必要がないため、コーディングの本質のところに集中しやすそうだと感じました。

また、BEM×SASSでは、要素のCSSを探すために検証で行番号を調べてファイルの中を探すといった工程が発生しますが、styled-componentsではコンポーネントと同じファイル内にCSSの記述があるため、要素の検証を使わなくてもCSSの記述を見つけやすいという事も感じました。また、JSの制御とCSSの連動も、より直接的に記述できるため、どこで制御しているのかわからないという自体になることもほぼないのではないかと思いました。

styled-componentsのデメリット

CSSを設定する要素ごとにコンポーネントを作ることになるため、HTMLとしての可読性が低くなるという問題があります。また、CSSの流用がしづらいというデメリットもあります。

これらのデメリットは、styled-componentsからインスパイアされて登場したEmotionでは克服されていて、まだ利用率はstyled-componentsのほうが高めのようですが、同じ記述形式を採用するのであれば、Emotionを利用したほうが良いかもしれません。

また、styled-componentsでは、要素ごとに変数としてCSSを記述するため、これまでのCSSとは記述方法が大きく変わってきます。CSSをまとめて記述したり、既存のCSSを移植したりしたい場合は、CSSを別ファイルとして管理するCSS Moduleを採用したほうが良いかもしれません。

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。