CSSモジュールとはどういう意味ですか?-フロントエンドQ&A-php.cn

An example heading

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSSモジュールとはどういう意味ですか?

青灯夜游

Nov 18, 2021 pm 05:38 PM

css モジュールは、デフォルトですべてのクラス名とアニメーション名が独自のスコープを持つ CSS ファイルを指します。これは、ビルドステップで CSS クラス名とセレクターのスコープを制限する方法です (名前空間と同様) 。 CSS モジュールを使用すると、単一コンポーネントのすべてのスタイルが同じ場所に集中し、そのコンポーネントにのみ適用されるようになります。

CSSモジュールとはどういう意味ですか?

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

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

Gihub の CSS モジュールプロジェクトによると、これは次のように解釈されます:

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

つまり、CSS モジュールは公式の標準でもブラウザ機能でもありませんが、ビルドステップ (Webpack や Browserify の使用など) 中に CSS クラス名とセレクターをスコープする方法です (名前空間に似ています)。。

まず、CSS モジュールとは何か、そしてなぜ CSS モジュールを使用する必要があるのかを説明するために、具体的な例を見てみましょう。通常、スタイルを制御するために HTML に CSS クラス名を追加します:

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

ログイン後にコピー

CSS スタイルは次のとおりです:

.title {
  background-color: red;
}

ログイン後にコピー

CSS ファイルを HTML ファイルにロードするだけです (ここでは < h1>) ; タグの背景は赤に設定されます。 HTML や CSS の特別な処理を行う必要はなく、ブラウザはこの最も基本的なファイルタイプをすでにサポートしています。

CSS モジュールの使用方法が異なり、すべてのタグを JS ファイルに記述する必要があります。簡単な例を次に示します。

import styles from "./styles.css";

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

ログイン後にコピー

JS では、styles.title と同様の方法で CSS ファイルの .title クラスにアクセスできます。次に、ビルドプロセス中に、ビルドツールは import ステートメントでロードした styles.css という名前のファイルを検索し、ソースファイルを解析して新しい HTML および CSS ファイルを作成し、クラス名が特定の名前に置き換えられます。形式:

HTML

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

ログイン後にコピー

CSS

._styles__title_309571057 {
  background-color: red;
}

ログイン後にコピー

CSSモジュールとはどういう意味ですか?

汎用 .title は、新しく生成された名前と CSS ソースに完全に置き換えられます。ファイルもロードされません。

CSS モジュールを使用する場合、クラス名は動的に生成され、一意であり、ソースファイル内の各クラスのスタイルに正確に対応します。

#これは、スタイルスコープの実装の原則でもあります。これらは特定のテンプレートに制限されています。たとえば、buttons.js に button.css ファイルをインポートし、.btn スタイルを使用する場合、forms.js などの他のファイルは、buttons.css.

もインポートしない限り、.btn の影響を受けません。しかし、CSS ファイルや HTML ファイルをこれほど断片化するのは何のためでしょうか?なぜ CSS モジュールを使用するのでしょうか?

CSS モジュールを使用する理由#CSS モジュールを使用すると、単一コンポーネントのすべてのスタイルを確実に同じ場所に集中させることができます:

##このコンポーネントにのみ適用します
さらに、
```
import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red} ${padding.large}">`;
```
ログイン後にコピー
このメソッドは、CSS のグローバルスコープの問題を解決できます。コードが引き起こす悪影響を考慮せずに、できるだけ早く CSS を書き終えようと焦った経験があるはずです。
スタイルファイルの最後に乱雑な名前の乱雑なスタイルを追加するなどの操作を行ったことがあるはずです。
どんな効果があるのか、使われているのかさえわからないスタイルを見たことがあるはず。
他のスタイルに影響を与えないCSSを安全に書きたいと思いませんか?スタイルが独立しているのか、何かに依存しているのか心配ですか？それとも他の場所のスタイルをオーバーライドするのでしょうか?
このような質問は、頭痛の種を引き起こすのに十分です。そしてプロジェクトが拡大するにつれて、それはますます絶望的になります。
しかし、CSS モジュールを使用すると、これらの問題を回避できます。モジュールに CSS スタイルをロードしない限り、このスタイルは他の HTML には影響しません。
（学習ビデオ共有:
css ビデオチュートリアル
）
以上がCSSモジュールとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。