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を適用したいモジュールのファイルで、
|
1 |
import styles from './xxx.module.css'; |
のように直接読み込むことができます。
SASSをCSS Modulesとして読み込むことも可能で、
その場合、
|
1 |
yarn add sass |
もしくは
|
1 |
npm i -D sass |
でSASSをインストールした上で、
|
1 |
import styles from './xxx.module.scss'; |
のように読み込めます。
読み込んだCSSを以下のようにclassNameとして指定することで、CSSを適用できます。
たとえば、SCSSファイルで、.bg、.bodyというclassのスタイルを記述している場合、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.bg { width: 100%; height: 100%; background: rgba(0, 118, 255, 0.9); position: fixed; left: 0; top: 0; z-index: 5; animation: fadeIn .5s; } .body { width: 360px; padding: 30px; border-radius: 4px; background: var(--color-bg); position: absolute; left: calc(50% - 180px); top: 100px; z-index: 6; animation: popIn .3s cubic-bezier(0.34, 1.56, 0.64, 1), fadeIn .3s; @media screen and (max-width: 768px) { padding: 20px; top: 80px; } @media screen and (max-width: 424px) { width: 84%; left: 8%; } } |
以下のように 読み込んだstylesのプロパティとしてclass名を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
import styles from './xxx.module.scss'; const Example: React.FC = () => { return ( <> <div className={styles.bg}></div> <section className={styles.body}> ︙ </section> </> ) } |
styled-componentsと比べてみた感想
これまでのCSSやSASSの記述に慣れている方は、こちらの方が馴染みがあり、記述しやすいと思います。
styled-componentsでは、styleを記述するHTMLタグごとにコンポーネントを作らなければならず、コンポーネントを作るときに基本的にはHTMLタグも指定するため、HTMLとしての可読性も低くなり、独自の記述方法が必要になりますが、
CSS Modulesでは、HTMLタグをそのままに、classNameとしてstyleを適用させるので、HTMLとしての可読性を維持することができます。
共通の色などのテーマの指定も、
styled-componentsでは以下のように、ThemeProviderを使った、CSSとは異なる独自の指定方法が必要になりますが、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import styled, { ThemeProvider } from 'styled-components'; const theme = { colors: { bg: '#fff', primary: 'rgba(0, 118, 255, 0.9)', text: '#000', border: '#eaeaea' } }; const Layout: React.FC = ({children}) => { return ( <ThemeProvider theme={theme}> ︙ </ThemeProvider> ) } |
CSS Modulesでは、通常のCSSと同じ、カスタムプロパティを使って記述できます。
|
1 2 3 4 5 6 |
:root { --color-bg: #fff; --color-primary: rgba(0, 118, 255, 0.9); --color-text: #000; --color-border: #eaeaea; } |
過去のコードからの引き継ぎや、将来的な別のフレームワークへの移行などを考えると、CSS Modulesの方が、優しいかもしれません。
