Migrate to CSS modules

CSS modules are pretty clearly the future. Migrate from monolithic application.css to CSS modules.

Currently feeling ambivalent about using direct CSS module import (supported by webpack) vs. something like babel-plugin-react-css-modules.

In general this should be relatively straightforward since the BEM blocks defined in application.css roughly correspond to React components. Ultimately we will want to just go one component at a time, migrating all of the rule sets used by classes in that component into the component’s companion CSS module.

We will want to be vigilant for situations in which there is coupling between styles in different components: for example, a situation in which a parent component defines a flex container, but the flex items are inside a child component. Generally we’ll want to refactor so that either the container is moved into the child component, or the flex items are moved down into the parent component; components should be self-contained from a styling standpoint.

まず application.css を読み、その BEM ブロックを対応する React コンポーネントにマッピングします。CSS module の直接インポート方式と babel-plugin-react-css-modules を比較し、その後、親コンポーネントと子コンポーネント間のスタイリングの依存関係を特定します。モノリシックなスタイルシートがコンポーネントごとに移行され、コンポーネント間のスタイリングの結合がなくなれば完了です。