Note: It is written in Japanese 🇯🇵
React・Redux・React CSS Modulesを使用した際のどのようにすればスケールしやすく管理しやすくなるかについてまとめたものです。調べながらメモっているので何か間違いなどありましたコメントしていただければ幸いです。
分かりやすいように実際に自分が作ろうとしている GitHub のレポジトリを NAVER まとめのように自分でまとめるサービスを例に取りながらどのようにすれば良いのかについて理由とともにまとめます。
├── components
├── containers
│ ├── app
│ ├── List
│ ├── detail
│ └── edit
├── index.js
└── root.js
See:
- https://www.youtube.com/watch?v=rSx5RxuaZfc
- https://speakerdeck.com/vjeux/react-css-in-js
- http://manofhustle.com/2015/01/19/dynamically-add-classes-react-classset/
- https://github.com/js-next/react-style
開発
<!-- 必要なCSSを自動でインポートする -->
<div className={cx('messagerFoo/title')} />↓
本番
<!-- ランダムな英数字 -->
<div class="nGTfi1wl" />Atomic Design の考えを取り入れた Atomic CSSには以下の様なレイヤーがある。
- Atomics ... 要素（例: button）
- Molecules ... 要素をもとに作られたコンポネート。SMACSS でいうところの Module
- Organisms ... Molecules のかたまり（例： header, footer）。SMACSS でいうところの Layout
- Templates ...
- Pages ...
- Quarks ...
src/ > ui > 上のレイヤー
src/ > action
💡 react のコンポネートとそのスタイルは同じディレクトリで管理する
👉 例えば、container/list/index.js と container/list/styles/list.css という感じにコンポネートと一緒にスタイルを置くのはコンポネートごとにスタイルがまとまるのでいいと思う。あと、コンポネートの中で import styls from './style/list.css'とインポートするので。
せっかく Redux と CSS-modules を使うなら Containers と Component が分けれるのでそれぞれの中に style みたいな名前のディストリを作成してスタイルを分けたほうがいい。そうすることでスタイルは完全にそのなかで囲める。でも大きな塊ならそれでいいけどそれぞれの Component 内でボタンなどいった小さな要素（＝ Atom ）は同じものを使う。スタイルをそれぞれで分けるからと言って小さな塊まで何回も書かないと行けないのは面倒くさい。ある一定の大きさまでは csstoolkit といったディレクトリを作成してそこの中から @import していく。
| Redux | Atomic Design |
|---|---|
| Containers | Pages & Templates |
| Component | Organisms & Molecules |
| ? | Atoms |
| ? | Utilities |