Vue.jsでCSSを利用する際にScoped CSSやCSS Modules、CSS-in-JSなどの手法があります。とくにScoped CSSは気軽に利用できるため、利用する機会も多くなって来るかと思います。 Scoped CSSがあればCSS設計を使わなくてもよいという意見もありますがはたして本当なのでしょうか? ICSではScoped CSSにおけるCSS設計に関する議論が活発におこなわれており、本記事では私たちが考えた方式を紹介します。本記事はVue.jsのSFC(シングル・ファイル・コンポーネント)でScoped CSSを利用しているものを想定しています。 CSS設計とは 基本的にCSSは常にすべてのページで読み込まれ、増えれば増えるほど相互に上書きし合う状態が起きやすく、他の言語に比べてかなり壊れやすい言語と言えます。 そこで登場するのがCSS設計です。BEMやSMACSS、
![Scoped CSSにおけるCSS設計手法 - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/ddd7eeaaf1039beec094474b152031d34225233d/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F200515%2Fimages%2Feyecatch.png)