CSS のモジュール化により名前の競合が解決される --- css モジュール

CSSモジュールによる競合解決

CSS の範囲はグローバルであり、プロジェクトはますます大きくなり、人々もますます増えています。名前付けが徐々に問題になり、名前の重複が発生するのは避けられないため、対応するモジュール型ソリューションが生まれました。
現在、次のカテゴリがあります。

1. CSS 命名方法: 手動で命名規則に同意します。
2.CSS モジュール: CSS ファイルは独立したモジュールです。
3.CSS-in-JS: JS で CSS を記述します。
4.HTML5 スタイルのスコープ

CSS の命名方法

良い

BEM はブロック要素修飾子 (Block Element Modifier) であり、 .block__element–modifier、つまり.module name__element name – modifier nameの3 つの部分から名前が付けられます。モジュール名と要素名を明確に区別するには、二重下線__を使用します。要素名と修飾子名を明確に区別するには、二重ダッシュを使用します。

.box__menu-item--active {
    
    }

この種の命名は主に、命名上の制約に従うために人為的に行われます。

アトミックCSS

アトミック CSS は、スタイルが重複しないように単一の属性をクラスにカプセル化するアトミック CSS です。これにより属性の再利用が容易になりますが、複雑なスタイルを持つ要素のクラスが非常に肥大化する原因にもなります。

<div class="mt-10 w-100 h-15"></div>

CSSモジュール

css モジュールは、次の考え方に従ってクラス名の競合を解決します。

大規模なプロジェクトでは CSS クラス名の競合がよく発生します
大規模なプロジェクトでは、プロジェクトのビルドにビルドツール (webpack など) がよく使用されます。
ビルドツールを使用すると、CSS スタイルをより詳細なモジュールに分割できます
JS 変数と同様に、各 css モジュールファイル内でクラス名が競合することは難しく、異なる css モジュールファイル内でクラス名が競合することがよくあります。
スタイルコードをマージした後、ビルドツールにクラス名の競合がないことを確認してください。

CSS Modulesこれは公式の標準でもブラウザ機能でもありませんが、ビルドステップ (Webpack や Browserify の使用など) 中に CSS クラス名セレクターのスコープを設定する (ハッシュによる名前空間のようなメソッドを実装する) 方法です。

webpackコンポーネントcss-loader が組み込まれておりCSS Modules、簡単な設定で使用できます。

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: [
          'style-loader',
          {
    
    
            loader: 'css-loader',
            options: {
    
    
              modules: true,
            }
          }
        ],
      },
    ]
  }
};

カスタム生成されたクラス名のデフォルトのハッシュアルゴリズム
css-loaderは [hash:base64] ですが、必要なクラス名の形式をカスタマイズする必要がある場合があります。これにより、生成された名前の形式を指定するためのパラメータがcss-loader提供されます。localIdentName

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: [
          'style-loader',
          {
    
    
            loader: 'css-loader',
              options: {
    
    
                modules: {
    
    
                  localIdentName: '[name]__[local]-[hash:base64:5]'
             },
          }
        ],
      },
    ]
  }
};

Vue はモジュールを使用します

<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;
}

範囲

CSS Modules :localスタイルのローカライゼーションは、デフォルトのローカルスコープを通じて実現され、グローバルスコープ:global はスタイルのグローバル化を実現するために使用されます。同時に、グローバルクラス名のパッケージ化はハッシュ文字列にコンパイルされません。

// 局部样式(可以省略:local)
.normal {
    
    
  color: green;
}

:local(.normal) {
    
    
  color: green; 
}


// 全局样式
:global(.btn) {
    
    
  color: red;
}

グローバルクラス名

一部のクラス名はグローバルかつ静的であり、変換する必要はありません。クラス名の位置で特別な構文を使用するだけで済みます。

:global(.main){
    
    
    ...
}

global を使用しているクラス名は変換されず、逆に global を使用していないクラス名はデフォルトで local が使用されることを意味します。

:local(.main){
    
    
    ...
}

ローカルクラス名はローカルクラス名を表すために使用されますが、競合が発生する可能性があるクラス名であり、cssモジュールによって変換されます。

注意点

アニメーションアニメーションのキーフレームを処理する場合、アニメーション名を最初に記述する必要があります。たとえば、アニメーション: deni .5s は正常にコンパイルされます; アニメーション: .5s deni は異常にコンパイルされます
。css-loader を忘れずに設定してください。そうしないと有効になりません。
style-loader を使用している場合、それを有効にするには、これを設定して vue-style-loader に変更する必要があります。
CSS モジュールは重さの問題をどのように解決しますか?

利点: 名前変更または名前空間を通じてスタイルルールをカプセル化できるため、セレクターの制約が軽減され、特定のメソッドなしでクラス名を快適に使用できるようになります。スタイルルールが各コンポーネントに結合されている場合、コンポーネントが使用されなくなったときにスタイルも削除されます。

JSのCSS

それを完全に放棄しCSS、JavaScript書面によるCSS ルールとインラインスタイルを使用します。React: JS の CSS // Speaker Deck。ラジウム、反応スタイルはこのカテゴリに分類されます。しかし、次のような問題があります。

疑似クラスやメディアクエリ等は使用できません。
スタイルコードの重複もたくさんあります。
本格的な CSS プリプロセッサ (またはポストプロセッサ) を利用できない

JS を使用してスタイルモジュールを管理し、
JS を使用してネイティブ CSS ファイルをコンパイルしてモジュール化します。

CSSスコープ付き

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

<style scoped>
.example {
    
    
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

変換する

<style>
.example[data-v-f3f3eg9] {
    
    
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

知らせ：

1. scoped在DOM中添加了一个唯一的属性data-v-f3f3eg9，在css中也添加了一个属性.example[data-v-f3f3eg9]
来保证唯一性，这样如果外部使用了同名的class，依然有可能影响组件的样式
2. scoped使用了属性选择器，会使得选择的效率降低
3. scoped在html和css中都添加了哈希值，会使得两者的提交都变大，降低加载速度，影响渲染效率
4. scoped修改子组件的样式，必须使用深度选择器

欠点:

ユーザーが別の場所で同じクラス名を定義した場合でも、コンポーネントのスタイルに影響を与える可能性があります。
CSSのスタイル優先の特性上、スコープ処理を行うと各スタイルの重みが大きくなり、スコープコンポーネントを
サブコンポーネントとして参照すると、サブコンポーネントのスタイルを変更することが困難になり、使用せざるを得ない場合があります。重要:
スコープを指定すると、タグセレクターのレンダリングが何度も遅くなります。タグセレクターを使用する場合、スコープを指定するとパフォーマンスが大幅に低下しますが、クラスや ID を使用すると低下しません。

全体として、CSS モジュールはスコープ付きのものよりも優れており、CSS モジュールを使用することをお勧めします。
最後に、開発効率を大幅に向上させるプラグインを皆さんにお勧めしたいと思います。スタイルを書くとき。
ここに画像の説明を挿入します

Ctrl キーを押しながらマウスを移動してクリックすると、そのスタイルにジャンプします。

ここに画像の説明を挿入します
参考記事：https://juejin.cn/post/6994046975851102239