原文住所:https://css-tricks.com/css-mo...最近CSS Modulesに興味があります.もしあなたが彼らを聞いたことがあるなら、このブログはあなたにぴったりです.私たちはその目的と主旨を探求します.同じように気になる方は、次のブログでCSS Modulesの使い方をご紹介します.自分で試してどのように使うかを把握したい場合は、第3の部分があなたに適しています.この部分では、React環境でどのように使用するかを分析しています.

CSS Modulesとは?

公式のrepositoryによると、CSS Modulesは:
すべてのclassの名前とアニメーションの名前は、デフォルトではローカルの役割ドメインのCSSファイルに属します.
したがってCSS Modulesは公式の仕様ではなく、ブラウザのメカニズムでもなく、構築ステップのプロセスです.(構築には通常、webpackまたはbrowserifyのヘルプが必要です).ツールのヘルプを構築することで、classの名前またはセレクタの名前をドメイン化できます.(ネーミングスペース化に似ています.)
これはいったい何ですか.なぜこんなことを?私たちはすぐに紹介します.まず、HTMLとCSSの仕組みを忘れないようにしましょう.HTMLにクラスを追加します.

An example heading

CSSにおけるこのclassの定義は以下の通りである.

.title {
    background-color: red;
}

CSSがHTMLドキュメントに追加される限り、その

の背景色が赤です。CSSやHTMLファイルを人為的に処理する必要はありません。ブラウザ自体がこれらのファイルのフォーマットを理解しています。 CSS Modulesは上記の方法とは異なります。私たちは純粋なHTMLを書かないで、indexのようなものが必要です。jsのようなJavascriptファイルには、私たちのすべてのラベルが書かれています。ここでは、これがどういうことなのかを説明する例があります(私たちは後でもっと本当の例を見に行きます): import styles from "./styles.css"; element.innerHTML = ` An example heading `; 構築の手順では、コンパイラがインポートしたstylesを検索します。cssファイル、そしてさっき書いたjsファイルにstyles.titleは.title classが使用できます。私たちの構築ステップでは、これらのものを新しい、分離されたHTMLとCSSファイルとして同時に処理し、HTMLとCSSセレクタのclassを新しい文字列で置き換えます。 構築ツールによって生成されるHTMLは、次のようになります。 An example heading コンストラクションツールによって生成されるCSSは、次のようになります。 ._styles__title_309571057{ background-color: red; } classプロパティと.titleセレクタはもう完全に消えて、代わりにこの新しい文字列です。私たちのソースCSSファイルもブラウザにサービスを提供していません。Hugo Griaudelがこのモジュールのチュートリアルで述べたように、 [the classes]は動的に生成され、一意であり、現在のスタイルとマッピング関係がある。 これがスタイルにも役割ドメインがある理由です。これらの役割ドメインは、特定のテンプレートです。もし私たちにcssファイルはjsテンプレートにインポートする、cssファイル内の.btn classは、このファイルに同様にインポートされない限り、他のテンプレート(forms.jsなど)に対しても使用できません。 なぜ私たちはCSSとHTMLをこのようにしたいのですか?私たちがこのようにした本当の原因は何ですか?

なぜCSS Modulesを使うのですか?

CSS Modulesがあれば、すべてのスタイルが単一のコンポーネントにサービスできることを確認できます.

は1つの場所に集中している

はそのコンポーネントにのみ適用され、他のコンポーネントは

には適用されません.
それ以外に、どのコンポーネントも次のように依存できます.

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

element.innerHTML = `
`; 
 
           CSS         。
 
 
          ，         css ？                       ？
 
 
                       ，                      ？
 
 
                      ？              ？
 
 
                    ，           ？                        ？              ？
 
 
          ，      ，              。
 
 
      CSS Modules  ，               ，         。             。
 
 
  ，       CSS module-style class        ， HTML   random-gross-class，          ，             ._style_random-gross-class_0038089.
 
 
composesキーワード
 
 
          type.css      text  。      ，          ：
 
 
.serif-font {
    font-family: Georgia,serif;
}
.display {
   composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}
  
テンプレートにclassを  します.
import type from "./type.css";
element.innerHTML = 
`
    
This is a heading
;
`
  
コンパイルされたテンプレートのラベルは のようになります.
Heading title
  
composesキーワードを  して2つのclassを  にバインドし、Sassの@extendのようなソリューションのような  を  します.
  されたCSSファイルからcomposeに くこともできます.
.element{
    compose: dark-red from "./colors.css";
    font-size: 30px;
    line-height: 1.2;
}
  
BEM  
  
CSS moduleの   にBEMは  です.2つの  があります.
  しやすい-  type.displayのようなコードは、   にとってBEM-yのようなものです.font-size__serif--large.BEMセレクタが くなると、より かりやすいかもしれません.
  
ローカルドメイン- えばモジュールに  している.bigはfont-sizeプロパティのclassを  します. じように たちはまた うかもしれません.bigはpaddingとfont-sizeを  に  させる.   だよ!  ドメインのスタイルにはそれぞれの  があるので、  しません.moduleには2つのスタイルシートが  され、  の  が いています. たちの  ツールはそのclassに   を けて  します. い えれば、CSS modulesは   の  を  した.
  
かっこいいですね.
これらはCSS Modulesの  の  にすぎない.
もっと  したいなら、Glen Maddenはこのようなメリットをもっと きました.
このシリーズの の  では、WebpackとCSS Modulesをプロジェクトでどのように  するかを ります.  のES 2015の  を いて  し、コードの をいくつか して  を きます.