CSS-Scoped属性の使い方

こんにちは、コードリックの小川です。
今回は仕事の中で学んで、便利だと感じたCSS-Scopedの設定方法についてお話ししたいと思います。


弊社では、Vue.jsを使ってアプリ等の開発を行い、Pythonを使用してAIを組み込むなどをしています。
主にVueを触る機会が多いのですが、その際にどうしてもソース量が増えてしまうことになり、可読性の悪さに自分の知識、勉強不足を日々痛感しています。


そんなときいつものようにモック作成をしていて、styleタグにScoped属性を付与する事を忘れてどんどん書き進めていた事がありました。
書いてるうちに「あれ？」となり、リロードすると今効いていたはずのスタイルが効いていない・・・
既にかなりの量を書いていたので冷や汗が出ました。


全て書き直すには時間がかかります。そこでようやく、styleタグにScoped属性を付与していないことに気づきました。
呼び出しているコンポーネントのスタイル、ページ側で設定しているコンポーネントスタイルを分けて書き直していて、
Scopedを外して呼び出しているコンポーネントのスタイルを設定してみると、コンポーネント側で設定したスタイルを書き換えられる事に気づき、
ページ側の親コンポーネントclassに、コンポーネント側で設定したclass名を指定すると他のページに影響なくコンポーネント側のスタイルを設定できました。

<style lang="sass" >
._myPage ._botton
 css記載
</style>

またコンポーネントごとにファイルを分ける事で１ファイルごとのソース量が減り、
可読性がよくなったことでアドバイスをしていただく際にも場所の特定がしやすく、より効率的になりました。


templateタグの方で簡単なスタイル指定ができるので、中央寄せするだけだったり、
display : flexをつけるだけならtemplateに直書きすると、class名を付けて、CSSを記述しなくても良いので個人的にはオススメです。

<template>
 <div :style="['display: flex','justify-comtent: center']" >
  <button/>
  <button/>
 </div>
</template>

ソース量が多くてどうにかスッキリさせたいという方は一度試してみてはどうでしょうか。
今後も業務の中で学んだ事などを紹介していきたいと思います。