はじめに

スコープ付きCSSを使用することでスタイルが反映できる範囲を対象のコンポーネント内（同ディレクトリ内）に限定することができる。
他のコンポーネントに影響を与えないのでクラス名の衝突などを防ぐことができる。
styleタグにscopedオプションをつけて<style scoped>を配置することでスコープ付きCSSを利用できる。
そうすることで「data-v-xxxxxx」のようなユニークな属性が付与されたタグとセレクタに変換される。

sample.html

<div class="sample" data-v-aaaaaa>
  <span class="title" data-v-aaaaaa>sample</span>
</div>

sample.css

span.title[data-v-aaaaaa] {color:red;}

スコープとは？

スコープとは影響が及ぶ範囲。定義されたデータ、メソッド、テンプレートがスコープとなる。

子コンポーネントの扱い

コンポーネント内に子コンポーネントが存在する場合、子コンポーネントのルート要素は親スコープのCSSと子スコープのCSS両方の影響を受ける（親コンポーネントからでも子コンポーネントのスタイルが変更できる）

親コンポーネントから子コンポーネントに干渉

親コンポーネントで子コンポーネントのスタイルを指定する場合は特殊なセレクタを使用する。

sample.vue

/* cssの場合 */
<style scoped>
.parent >>> .child { ... }
</style>

/* scssの場合 */
<style scoped>
.parent /deep/ .child { ... }
</style>

注意すること

スコープをつけることでCSSがコンポーネント内に限定され、クラス名を指定しないp {color: red;}といったスタイルの定義も可能になる。しかし、クラス名の指定が全くないとUIの構造として何を意味するスタイルか分かりづらく、ブラウザのパフォーマンスも低下してしまうので、クラス名をつけることが望ましい。