Vueでcss書く時に意識していること

汎用クラスを使う

bootstrapやVuetify使ってるなら汎用クラスが備わってるのでそれを使いましょう。

Spacing · Bootstrap

Material Component Framework — Vuetify.js

以下のようなスタイル指定はhtmlがulからolに変わった場合に、スタイルも併せて変更する必要があります。汎用クラスを使っておけばhtmlのみの変更で済み、冗長なスタイルの指定も不要です。（1要素に2個くらいまで）

<template>
  <div>
    <p>リスト</p>
    <ul class="mt-1"> 
    </ul>
  </div>
</template>

<style scoped lang="scss">
ul {
  margin-top: 1em;
}
</style>

↓

<template>
  <p>リスト</p>
  <ul class="mt-1"> 
  </ul>
</template>

コンポーネント単位でクラス名をつける

以下のようにコンポーネント単位でクラス名を付けることで、scopedの複雑な仕様に悩まされることなく書けます。
コンポーネント名とクラス名の1:1を守ればscopedを使わずとも、スタイルが重複することはありません。

出力されるcssのセレクタも.chat .headerでなく.chat-headerと1セレクタになるので、レンダリングのスピード的にもよかったはず。

（BEMのelement, modifierの違いは名前から判別できるので全て-で繋ぐスタイル。）

Chat.vue

<template>
  <div class="chat">
    <h2 class="chat-header">チャット見出し</h2>
    <div class="chat-box">
      <p class="chat-box-text chat-box-text-admin"></p>
      <p class="chat-box-text chat-box-text-user"></p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.chat {
  &-header {
    margin-top: 1em;
    font-size: 16px;
  }
  &-box {
    &-text {
      backgroud-color: #ddd;
      &-admin {
        backgroud-color: #333;
      }
    }
  }
}
</style>

↓ 出力されるcss

.chat-header {
  margin-top: 1em;
  font-size: 16px;
}
.chat-box-text {
  backgroud-color: #ddd;
}
.chat-box-text-admin {
  backgroud-color: #333;
}