かとのぼのマイコード・マイライフ

個人開発者かとのぼのプログラミングと雑談のブログです。たまに読書と銭湯も

Vue.jsのCSSのstyleタグはscopedを入れる方がいいのか?

基礎から学ぶ Vue.js

stytle scoped cssと単一コンポーネントファイル

Vue.jsの強力な機能に拡張子「.vue」の単一コンポーネントがあります。

単一コンポーネントは、「template」「script」「style」の三つで構成され、それぞれざっくりとHTML部分、javascript部分、CSS部分に別れています。この3つが一つのファイルに入っていることで、コンポーネント(部品)として再利用ができたり、見通しがよくなったりします。

Vue.jsについての概要はこちらの記事をご覧ください。

www.katonobo.com

単一コンポーネント機能が私は気に入っているんですが、その中で「style」タグを「scoped」する「scoped css」という、コンポーネント内だけの固定付きのCSSという機能があります。

スコープ付き CSS · vue-loader

つまり「scoped css」でCSSを記述すればコンポーネント以外にはCSSが適応されないため、レイアウトの管理が楽になります。

scopedは設定した方が良いのか?

結論から言うと、scopedをつけた方が管理が楽になるのでおすすめです。

理由は、先ほど述べたように単一コンポーネント単位で管理ができるのでレイアウトの調整が簡単になるからです。

ところが、いろんな人のコードを見てると付いてたり付いてなかったり様々です。

そこは好みの問題ということになると思うんですが、scopedをつけると時々予期せぬ挙動が起こるようです。

qiita.com

ただ、私が開発してきたWebサービスでは、scopedにしたためにレイアウトで困ったことはなった事態はありません。

おそらくデザインの多くをUIフレームワークに頼っていると言うこともあると思いますが、そんなに神経質になる必要はないでしょう。

コードに関しては、なるべくシンプルにして管理しやすくした方がバグとか問題が起きた時に解決しやすくなりますので、その部分も天秤にかけて話代謝scopedの選択しました。

関連記事:

 

www.katonobo.com

www.katonobo.com

 

www.katonobo.com 

参考: