CSSモジュールとは何ですか

CSS モジュールは、すべてのクラス名がローカル スコープのみを持つ CSS ファイルです。つまり、CSS ファイル内のすべてのクラス名とアニメーション名のスコープは、デフォルトで現在のスコープになります。 CSS モジュールはスコープをコンポーネントに制限するため、グローバル スコープの問題を回避します。

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

CSS モジュールは:

すべてのクラス名とアニメーション名がデフォルトでローカルにスコープされる CSS ファイルです。

CSS ファイルは次のとおりです。すべてのクラス名とアニメーション名のスコープは、デフォルトで現在のスコープになります。

CSS モジュールは、すべてのクラス名がローカル スコープを持つ CSS ファイルです。

つまり、CSS モジュールはブラウザの公式仕様や実装ではなく、(名前空間と同様に) クラス名とセレクターのスコープを現在のファイルに変更する (Webpack または Browserify の助けを借りて) メソッドです。 ）。

これはどのようなものですか?またその理由は何ですか?それはすぐにわかります。まず、HTML と CSS が一般的にどのように機能するかを思い出してください。クラス名が HTML に適用されます:

<h1 id="An-nbsp-example-nbsp-heading">An example heading</h1>

CSS でこのクラスを定義します:

.title {  
    background-color: red;  
}

この CSS がこの HTML ドキュメントに適用されると、このクラスが適用される h1 の背景色変化するのは赤です。 CSS や HTML を扱う必要はありません。ブラウザはこれらのファイルの形式を理解します。

CSS モジュールは異なるアプローチを採用します。プレーンな HTML を記述するのとは異なり、index.js などの JavaScript ファイルにマークアップを記述する必要があります。次の例は、それがどのように機能するかを示しています (後でより実践的な例を使用します):

import styles from  "./styles.css"; 
element.innerHTML = 
    `<h1 class="${styles.title}"> 
        An example heading 
    </h1>`;

ビルド プロセス中、コンパイラーは導入した style.css ファイルを調べてから、JavaScript ファイルを調べます。は、styles.title を通じて .title クラスを適用します。次に、ビルド プロセスはこれらを新しい別個の HTML および CSS ファイルに処理し、HTML クラス属性と CSS セレクター クラスを新しい文字列に置き換えます。

生成される HTML ファイルは次のようになります:

<h1 class="_styles__title_309571057">
    An example heading 
</h1>

生成される CSS ファイルは次のようになります:

._styles__title_309571057 { 
    background-color: red; 
}

以前のクラス属性とセレクター .title は次の場所には存在しません。 all 、完全に新しい文字列に置き換えられます。以前の CSS はブラウザーにはまったく提供されなくなりました。

#なぜ CSS モジュールを使用する必要があるのでしょうか?

CSS モジュールを使用すると、すべてのスタイルが 1 つのコンポーネントに確実に適用されます:

• 1 か所で

• このコンポーネントにのみ適用され、他には何も適用されません

また、

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red}  ${padding.large}">`;

がこれを行うように、どのコンポーネントにも実際の依存関係を持つことができます。目的は次のとおりです。 CSS のグローバル スコープの問題を解決する

時間やリソースの不足により、他の人への影響を考慮せずに、できるだけ早く単純な CSS を書こうとしたことがありますか?その影響は何ですか?

スタイル シートの下部にランダムで悪い部分が残っており、それらを整理しようとしたものの、整理できなかったという経験はありませんか?

これまでに、それが何をするのか、あるいは使用されているのかがよくわからないスタイルに出会ったことはありますか?

他のスタイルを壊さずに一部のスタイルを削除できることを考えたことはありますか?このスタイルは自分次第なのか、それとも他人次第なのか気になりませんか?それとも他の場所でスタイルをオーバーライドしますか?

これらの質問をすると、頭が痛くなり、プロジェクトの期限が延長され、窓の外の景色が悲しくて切なくなるかもしれません。

CSS モジュールとデフォルトの現在のスコープの概念を使用すると、これらの問題は回避されます。スタイルを書くときは、そのスタイルの最終結果について考える必要があります。

たとえば、HTML で random-gross-class を CSS モジュール スタイル クラスとして適用せずに使用すると、CSS セレクターが ._style_random -gross-class_0038089 に変換されるため、スタイルは適用されません。

（学習ビデオ共有: css ビデオ チュートリアル ）

以上がCSSモジュールとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。