スコープ付き CSS を使用して Vue でコンポーネント スタイルの分離を実現するためのヒント

スコープ付き CSS を使用して Vue でコンポーネント スタイル分離を実装するヒント

Vue は人気のある JavaScript フレームワークであり、そのコンポーネント化された構造によりフロントエンド開発の効率が向上します。同時に、アプリケーションのサイズが大きくなるにつれて、スタイルの維持がより困難になります。この場合、Vue は、コンポーネント スタイルの分離を実現するのに役立つスコープ付き CSS と呼ばれる、シンプルだが強力なテクノロジを提供します。この記事では、スコープ付き CSS テクノロジーを使用してコンポーネントのスタイル分離を実現する方法を検討します。

スコープ付き CSS の概要

Vue では、レベル 3 CSS セレクターを使用してコンポーネントのスタイルを開発できます。以下に示すように:

<template>
  <div class="my-component">
    <p>Component content</p>
  </div>
</template>

<style>
.my-component p {
  color: red;
}
</style>

このコードは、my-component という名前のコンポーネントを作成し、コンポーネント内でレベル 3 CSS セレクターを使用します。スタイルは、.my-component 要素内の e388a4556c0f65e1904146cc1a846bee 要素にのみ適用されます。この手法はスタイル スコープと呼ばれます。コンポーネントの数が増えると、2 つのコンポーネントが同じ CSS タイプを持つスタイルの競合が発生し、表示上の問題が発生する可能性があります。この問題を解決するために、Vue は、スタイルをコンポーネントのスコープに制限できる、scoped と呼ばれるキーワードを提供します。以下に示すように:

<template>
  <div class="my-component">
    <p>Component content</p>
  </div>
</template>

<style scoped>
p {
  color: red;
}
</style>

この例では、スタイルはコンポーネント テンプレートの e388a4556c0f65e1904146cc1a846bee 要素にのみ適用されます。

注

• スコープ付き CSS は新しいテクノロジーではなく、Vue 上のアプリケーションです。
• スコープ付き CSS は、スタイル タグにのみ適用できるスコープ付きなどの疑似タグを使用します。
• スコープ付き CSS は、適用される各要素に擬似クラス タグを追加することで実装されます。同じ要素が複数のコンポーネントで使用されているかどうかに関係なく、このタグを追加することでスタイルの範囲を制限できます。

スコープ付き CSS サンプル コード

スコープ付き CSS テクノロジーを実証するために、2 つのコンポーネントを含むサンプルを作成します。各コンポーネントには異なるスタイルが含まれます。

まず、ボタンのあるフォームのスタイルを設定する最初のコンポーネントを作成します。このコンポーネントでは、ボタンは赤でマークされ、背景色は黒、枠線は太字になります。

<template>
  <div>
    <h3>Component 1</h3>
    <form class="my-form">
      <button class="my-button">Submit</button>
    </form>
  </div>
</template>

<style scoped>
.my-form button {
  background-color: black;
}

.my-form .my-button {
  color: red;
  background-color: white;
  border: 2px solid black;
  font-weight: bold;
}
</style>

次に、入力ボックスとスライダー付きの進行状況バーを含む 2 番目のコンポーネントを作成します。このコンポーネントでは、進行状況バーが緑色にマークされ、テキスト入力ボックスが灰色に設定されます。

<template>
  <div>
    <h3>Component 2</h3>
    <div class="progress">
      <input type="text" class="input-text">
      <div class="slider"></div>
    </div>
  </div>
</template>

<style scoped>
.input-text {
  color: gray;
}

.progress .slider {
  background-color: green;
  height: 10px;
  width: 50%;
}
</style>

このサンプル コードでは、スコープ付き CSS テクノロジを使用して、各コンポーネントのスタイルが他のコンポーネントに影響を与えないようにします。これにより、各コンポーネントには関連するスタイルのみが含まれ、他のコンポーネントの影響を受けなくなります。

概要

この記事では、Vue のスコープ付き CSS テクノロジについて説明しました。これにより、コンポーネント内のスタイルを範囲指定して、異なるコンポーネント間でのスタイルの競合を回避できます。この記事のヒントを使用して、次の Vue プロジェクトでコンポーネント スタイルの分離を実装します。これにより、コードがよりモジュール化され、保守しやすくなります。

以上がスコープ付き CSS を使用して Vue でコンポーネント スタイルの分離を実現するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。