世はReact with CSS 戦国時代...! Pure CSS CSS Modules Styled Components(CSS in JS) Emotion(CSS in JS) Linaria(CSS in JS) Tailwind CSS Framework(Chakura UIなど) と、Reactと共に使うCSSの選択肢は非常に多岐に渡り、学習者を混乱に陥れることもしばしばかと思います。 私が実装経験がない Tailwind CSS Framework については今回語りませんが、それ以外のCSS実装方法を全く同じコンポーネントを実装することで比較してみました。 下記が実際にコーディングしたGitHubになります。 Pure CSS 通常のCSSです。 CSSは全てがグローバルで管理されてしまうので保守・管理にコストがかかり、崩壊しやすいです。 なのでBEMなどのCSS設
![ReactのCSSの選択肢を比較してみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ca3db2f6c0a0a639bcfadbe6b55e53fe6e479e2/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--9nzPXvtS--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AReact%2525E3%252581%2525AECSS%2525E3%252581%2525AE%2525E9%252581%2525B8%2525E6%25258A%25259E%2525E8%252582%2525A2%2525E3%252582%252592%2525E6%2525AF%252594%2525E8%2525BC%252583%2525E3%252581%252597%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Airico%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzY2ZTk4ZmY5ZWUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)