コンポーネントにおける各スタイリングライブラリの責務

Note
noindex

React にはスタイリングライブラリの種類が様々あり、これが一番良いといったものがあるわけではなく、最終的には好みで決定される場面が多いかと思います。 しかし、これらのライブラリはそれが担うコンポーネントにおける責務が異なるため、あるライブラリでは使用される方法が他のライブラリではアンチパターンになり得るため注意が必要です。

そこで、ここではコンポーネントにおける責務を定義し、それらのどこを各スタイリングライブラリが担っているのかについて随時まとめていきます。

Preliminaries

ここでは、Vue.js | Single-File Components を参考にして、コンポーネントは props を受け取り次の 3 つを果たす責務があると定義します:

  • View - JSX.Element などの骨格の定義
  • Logic - React Hook などの処理の定義
  • Styling - View に当てる装飾の定義
react component の責務
component の責務

styled-components

styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾
styled-components.comstyled-components.com
styled-components
styled-components の構造
styled-components の構造

styled-components はコンポーネントをラップする形でスタイリングを決定するやり方であり、 具体的には、コンポーネントの props に新たに props を追加し、それらの値からスタイルを決定して className としてコンポーネントの props へスタイルに対応するクラス名を渡しています。

構造を見るに、styled-components におけるスタイリングの責務はコンポーネントの props に少し影響していることがわかります。

CSS Modules

GitHub - css-modules/css-modules: Documentation about css-modules
Documentation about css-modules. Contribute to css-modules/css-modules development by creating an account on GitHub.
github.comgithub.com
GitHub - css-modules/css-modules: Documentation about css-modules
CSS Modules の構造
CSS Modules の構造

CSS Modules は View のクラス名などの CSS Selector に紐づけてスタイリングをします。 あくまでスタイリングの指定は CSS ファイルなどで行い、View とのインターフェースに当たるのが CSS Selector になります。

tailwindcss

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Documentation for the Tailwind CSS framework.
tailwindcss.comtailwindcss.com
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
tailwindcss の構造
tailwindcss の構造

tailwindcss は CSS Modules のようにクラス名を紐付けてスタイリングをしますが、その粒度が小さいため、スタイリングの責務がほとんど View に移ります。

Author
me

気分駆動フロントエンドエンジニア

Related Posts