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

CSS モジュールは公式の仕様でもブラウザのメカニズムでもありませんが、ビルド ステップ中に CSS クラス名とセレクターをスコープする方法です (名前空間と同様)。ビルド ツールを使用すると、クラス名またはセレクター名のスコープを指定できます。

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

#css モジュールとは

Gihub の CSS Modules プロジェクトによると、次のように説明されています。

すべてのクラス名とアニメーション名には、デフォルトで独自のスコープ付き CSS ファイルがあります。

つまり、CSS モジュールは公式の仕様でもブラウザのメカニズムでもありませんが、ビルド ステップ (Webpack や Browserify の使用など) 中の CSS クラス名とセレクターのスコープであり、一方向 (名前空間と同様) ）。

css モジュールの利点

グローバルな名前付けの競合を解決する css モジュールは、コンポーネント自体の一意の名前付けのみを考慮します

モジュール化はコンポーネントに導入できます。コンポーズを使用する独自のモジュール スタイルと別のモジュールのスタイル

深すぎるネスト レベルの問題を解決し、フラットなクラス名を使用します

なぜ css モジュールを導入するのでしょうか?

1)、グローバル スタイルの競合

webpack がパッケージ化されるとき、すべての js ファイルがエントリ App.js ファイルにインポートされ、 CSS のレイアウト規則によれば、後のスタイルは以前のスタイル宣言を上書きするため、グローバル スタイル カバレッジの問題が発生します。

2) ネストレベルが深すぎるセレクター

特に深いネストによって引き起こされる問題:

- CSS セレクターによると、次のことから知ることができます。レベルが深くなるほど比較の数が多くなり、ページ全体のレンダリングに影響するという解析ルール

#- 不要なバイト オーバーヘッドが増加する

#- - 意味上の混乱とスケーラビリティの低下制約が増えるとスケーラビリティが低下します

3)、変数は共有できません

複雑なコンポーネントはスタイルを共同で処理するために js と css を使用する必要があります。

学習ビデオ共有:

css ビデオ チュートリアル

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