CSSモジュールの方法論の理解

CSSモジュール：コンポーネントCSSの強力なツール

この記事では、CSSモジュールを紹介します。これは、CSSグローバルネームスペースの競合を解決し、コンポーネントの命名を簡素化する効果的な方法です。通常、Webpackまたはbrowserifyのプラグインとして使用される特定の構成と構造プロセスが必要であり、独立して実行されません。

コアの利点：

• ローカルスコープ：CSSモジュールは、グローバルな命名競合を回避するために、デフォルトでCSSスコープをコンポーネントに制限します。
• ダイナミックネーミング：構築プロセスは、一意の動的クラス名を生成し、対応するスタイルにマッピングし、命令の競合を減らし、モジュール性を向上させます。
• スケーラビリティ：グローバルクラスの定義と他のモジュールからスタイルを拡張して、コードの再利用性と保守性を向上させることをサポートします。

作業原則：

CSSモジュールは、ReactコンポーネントなどのJavaScriptモジュールにCSSファイルをインポートすることにより実装されます。 CSSファイルで定義されているクラス名をマップして、動的に生成された一意にスコープされたクラス名にマップするオブジェクトを作成します。これらのクラス名は、JavaScriptの文字列として使用されます。

たとえば、

単純なCSSファイル：

JavaScriptコンポーネントでの使用：

<code class="language-css">.base {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}</code>

コンピレーション後にWebpackが生成する場合があります：

<code class="language-javascript">import styles from './styles.css';

element.innerHTML = `<div class="${styles.base}">CSS Modules真有趣！</div>`;</code>

<code class="language-html"><div class="_20WEds96_Ee1ra54-24ePy">CSS Modules真有趣！</div></code>

クラス名生成は構成可能ですが、重要なのは、それらが動的に生成され、一意であり、正しいスタイルにマッピングされることです。

<code class="language-css">._20WEds96_Ee1ra54-24ePy {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}</code>

よくある質問：

クラス名はugly：
• クラス名は美学のためではなく、スタイルの適用のためであるため、これは問題ではありません。
デバッグの難易度：
• デバッグにソースマップを使用できます。スタイルの範囲は明確であるため、デバッグは比較的簡単です。
スタイルの再利用性が低い：
• CSSモジュールは、グローバルなスタイルの対立を回避するように設計されていますが、グローバルクラスまたはキーワードを定義して再利用性を向上させることでスタイルを拡張できます。 :global() composes

<code class="language-css">:global(.clearfix::after) {
  content: '';
  clear: both;
  display: table;
}

.base {
  composes: appearance from '../AnotherModule/styles.css';
}</code>

ビルドツールに依存しています。

これは、ビルドステップが必要なSASSまたはPostCSSに似ています。
初心者：

WebpackやBrowserifyなどのビルディングツールが必要です。

webpack構成：

：

に追加します

webpack.config.js別のCSSファイルを生成するには、

：

<code class="language-javascript">{
  test: /\.css$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { modules: true } }
  ]
}</code>

を使用できます。

MiniCssExtractPlugin

browserify configuration（example）：

<code class="language-javascript">const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ... other configurations
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { modules: true } }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};</code>

：

にnpmスクリプトを追加します

package.json

概要：

<code class="language-json">{
  "scripts": {
    "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
  }
}</code>

CSSモジュールは、特に大規模なプロジェクトに対して、持続可能でモジュール式、適切にスコープ、再利用可能なCSSライティング方法を提供します。

faq：

• 利点：クラス名の競合を避け、コンポーネントの再利用性と保守性を改善し、スタイルの組み合わせをサポートします。
• 実装：webpackまたはbrowserifyを構成するには、.module.css拡張子を使用します。
• グローバルスタイル：使用:global()を使用します。
• スタイルの組み合わせ：composesキーワードを使用します。
• 反応互換性と互換性があります：。
• 従来のCSSとの違い：さまざまなスコープは異なり、従来のCSS世界的に、CSSモジュールはローカルです。
• sass/lessと互換性があります：、追加の構成が必要です。
• debug：ソースマップを使用します。
• 制限：ビルドツールが必要です。メディアクエリなどをサポートするために追加の構成が必要になる場合があります。
• サーバー側のレンダリング：追加の構成が必要です。

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