Vue.js×CSSの注意点

はじめに

こんにちは！
過去、Vue.jsのscopedでハマったことがあったので、その辺りについて調査してみました！
具体的には、特定のコンポーネントのCSSがscopedになっておらず、全体影響がでてしまい、その原因究明にかなり時間がかかってしまいました、、

調査

参考

Vueでcss書く時に意識していること
https://qiita.com/kitanote/items/87d99c7e066a1d7b8103
【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件
https://qiita.com/mascii/items/3202b9e18fd4a7366ac1
Vue.jsのScoped CSSがいかにしてスコープを実現しているのか検証してみた
https://qiita.com/mascii/items/623d4c97c3f95e6984c0

調べてみると、scoped cssにはいくつかの問題点があるようです。

scoped cssの問題点

・Scoped指定しても子コンポーネントのroot要素にはスタイルが効いてしまう
・Scoped CSS では、グローバルに定義されたclassセレクタが適用されることがあるという落とし穴があり、コンポーネントの外側から影響を受けやすい仕組みとなっている。
・Scoped CSS では親コンポーネントと子コンポーネントで同じclass名を用いると予期せぬ装飾がなされることがあるという落とし穴もある

これらのデメリットを解決する代替手段としてCSS Modulesというものを使用する方法があるらしい、、！
CSS Modulesを指定すると、class名自体を重複しにくいものに自動で変更してくれるため、前述した問題点がかなり起きにくいようです。