この記事は、ReactでCSSを書くときに関連したCSSを別々のコンポーネントに分けるのをやめようという記事です。主な理由は、スタイリングという機能が複数コンポーネントに分散するのを防ぐためです。これには修正時に複数コンポーネントにまたがって修正が必要になるのを防ぐという意味もあります。 Flexboxの例関連したCSSが複数の要素に分かれることはよくあります。その代表例がdisplay: flexです。例えばこんなレイアウトを考えてみましょう。左側のボックスの幅が決まっていて右側の幅が可変の2カラムレイアウトです。 左のカラム (100px)右のカラムこのレイアウトはおおよそ次のように実現できます。 /* 親要素 */ display: flex; /* 子要素(左) */ flex: 100px 0 0; /* 子要素(右) */ flex: auto 1 0;では、Reactではどの
![まとまったCSSを別のコンポーネントに分けないでほしい話 - uhyo/blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f64f5f238bc000aad5ff8cddb2d1dbf039c626e/height=288;version=1;width=512/https%3A%2F%2Fblog.uhy.ooo%2Fimages%2Fblog-logo-256.png)