スコープ付きCSSとCSSスコープ内のCSSモジュールの違いに対する詳細な回答

この記事では、スコープ付き CSS と CSS モジュールの違いに関する関連知識を提供します。スコープ付き CSS と CSS モジュールはどちらも、CSS のローカル スコープを制御し、クラス名の重複を防ぐために使用されます。では、この 2 つの違いは何でしょうか?そうですね、皆さんのお役に立てば幸いです。

まえがき

スコープ付き css と css モジュールはどちらも、css のローカル スコープを制御し、クラス名の重複などの問題を防ぐように設計されています。それでは、この 2 つの違いは何でしょうか?

1. css モジュール

1.1. 説明
すべてのクラス名に対してクラス名を再生成し、CSS の重みとクラス名の重複の問題を効果的に回避します。 css モジュールはクラス名を直接置き換えるので、ユーザーがクラス名を設定してコンポーネントのスタイルに影響を与える可能性が排除されるため、名前付けに頭を悩ませる必要はありません。
1.2 実装原則
スタイル名にハッシュ文字列サフィックスを追加することにより、特定のスコープ コンテキストでコンパイルされたスタイルをグローバルに一意にすることができます。
1.3 使用法

• webpack.base.conf.js ファイルで、css-loader に module: true を渡し、CSS モジュールを有効にします。 localIdentName は、生成されるスタイルを設定するための命名規則です。

//webpack.base.conf.jsmodule: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }

• モジュール属性を < style > タグに追加します

<style module>.red {
  color: red;}.bold {
  font-weight: bold;}</style>

• vue テンプレートの動的クラス バインディングを通じて使用します

<template>
  <p :class="$style.red">
    This should be red  </p></template><template>
  <p>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold    </p>
  </p></template>

• js での使用

<script>export default {
  created () {
    console.log(this.$style.red)
    // -> "red_1VyoJ-uZ"
    // 一个基于文件名和类名生成的标识符
  }}</script>

1.4 使用効果

<template>
 <p :class="$style.gray">
 Im gray </p></template><style module>.gray {
 color: gray;}</style>

コンパイル後の結果:

//编译结果<p class="gray_3FI3s6uz">Im gray</p>.gray_3FI3s6uz {
 color: gray;}

1.5 注意事項

##アニメーションアニメーションのキーフレームを処理する場合、アニメーション名を最初に記述する必要があります。たとえば、アニメーション: deni .5s の場合は正常にコンパイルされますが、アニメーション: .5s deni の場合は異常にコンパイルされます。
• style-loader を使用している場合、それを有効にするには、これを設定して vue-style-loader に変更する必要があります。
• CSS モジュールは重さの問題をどのように解決しますか?
• 名前変更または名前空間を通じてスタイル ルールをカプセル化できるようにし、セレクターの制約を軽減し、特定のメソッドなしでクラス名を快適に使用できるようにします。
スタイル ルールが各コンポーネントに結合されている場合、コンポーネントが使用されなくなったときにスタイルも削除されます。
• 
  
  2. スコープ付き

2.1 実装原則

Vue は、重複しない一意のタグを DOM 構造と CSS スタイルに追加することで、一意性を確保します。スタイルの民営化とモジュール化の目的。 CSSウェイトとクラス名の重複の問題を完全に回避することはできません。 2.2 使用方法

< style > タグに scoped 属性を追加します
2.3 使用効果

<style scoped>h1 {
 color: #f00;}</style>

コンパイル結果:

h1[data-v-4c3b6c1c] {
 color: #f00;}

2.4 欠点

ユーザーが別の場所で同じクラス名を定義した場合、コンポーネントのスタイルに影響を与える可能性があります。

CSSのスタイル優先の特性上、スコープ処理を行うと各スタイルの重みが大きくなります スコープを使用したコンポーネントを参照する
• サブコンポーネントとして、サブコンポーネントのスタイルを変更することが困難になります-component. 使うしかないかもしれませんね！ important
• Scoped は、タグ セレクターのレンダリングを何度も遅くします。タグ セレクターを使用する場合、Scoped はパフォーマンスを大幅に低下させますが、class または ID を使用しても影響はありません。
  
• 3. まとめ

css モジュールの実際の効果はスコープ付きのものよりも優れており、css モジュールの構成は難しくないため、css モジュールをよりお勧めします。

(学習ビデオ共有:

css ビデオ チュートリアル

)

以上がスコープ付きCSSとCSSスコープ内のCSSモジュールの違いに対する詳細な回答の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。