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

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

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

Preliminaries

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

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

styled-components

styled-components

CSS for the <Component> Age

styled-components.com

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.com

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

tailwindcss

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

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

---