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

LaunchCartな日々

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

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

テクニック

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

前回、モダンなCSSとして、styled-componentsをご紹介しましたが、
今回は、同様に人気のあるCSS Modulesについてご紹介したいと思います。

↓作ってみたもの(出力されるコードはstyled-componentsのDEMOとほとんど変わらないので、参考までに)
DEMO

create-react-appやcreate-next-appでCSS Modulesを使う場合は、特に設定は必要なく、
xxx.modules.cssといった拡張子でCSSファイルを作り、
CSSを適用したいモジュールのファイルで、

のように直接読み込むことができます。

SASSをCSS Modulesとして読み込むことも可能で、
その場合、

もしくは

でSASSをインストールした上で、

のように読み込めます。

読み込んだCSSを以下のようにclassNameとして指定することで、CSSを適用できます。

たとえば、SCSSファイルで、.bg、.bodyというclassのスタイルを記述している場合、

以下のように 読み込んだstylesのプロパティとしてclass名を指定します。

styled-componentsと比べてみた感想

これまでのCSSやSASSの記述に慣れている方は、こちらの方が馴染みがあり、記述しやすいと思います。
styled-componentsでは、styleを記述するHTMLタグごとにコンポーネントを作らなければならず、コンポーネントを作るときに基本的にはHTMLタグも指定するため、HTMLとしての可読性も低くなり、独自の記述方法が必要になりますが、
CSS Modulesでは、HTMLタグをそのままに、classNameとしてstyleを適用させるので、HTMLとしての可読性を維持することができます。

共通の色などのテーマの指定も、
styled-componentsでは以下のように、ThemeProviderを使った、CSSとは異なる独自の指定方法が必要になりますが、

CSS Modulesでは、通常のCSSと同じ、カスタムプロパティを使って記述できます。

過去のコードからの引き継ぎや、将来的な別のフレームワークへの移行などを考えると、CSS Modulesの方が、優しいかもしれません。

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

Ninomiya

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