ReactアプリケーションでのCSSモジュールの使用に関する実践ガイド

こんにちはHabr！ Tatu Tamminenによる記事「ReactとCSSモジュールの実務ガイド」の無料翻訳に注目してください。



これまで、Web開発者は再利用可能なコンポーネントの作成に多くの時間と労力を費やしていました。 CSSは特定の問題であり、カスケードの性質でした。 たとえば、開発者がコンポーネントを作成してツリー構造を表示する場合、このコンポーネントで使用されるCSSクラス（たとえば.leaf ）がアプリケーションの他の部分で副作用を引き起こさないことをどのように保証できますか？ セレクタの問題に対処するために、さまざまな方法論と規則が作成されています。 BEMとSMACSSは、タスクを適切に実行するために広く使用されている方法論ですが、同時に理想からはほど遠いものです。 この記事では、命名規則に基づいたこのような方法論の欠点、CSSモジュールとは何か、これらのモジュールをReactアプリケーションで使用する方法について説明します。

カスケードの問題

グローバルスタイルの問題を説明する例として、再利用可能な選択コンポーネントを作成しましょう。 <select>要素を直接スタイリングするのは悪い判断です。サイトの他の場所では、元の定型化されていない要素または完全に異なる定型化が必要になる場合があるためです。 代わりに、BEM構文を使用してクラスを定義できます。

.select {} .select__item {} .select__item__icon {} .select--loading {}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

select__プレフィックスなしで新しいアイテムクラスが作成された場合、誰かが同じ名前のitemを使用したい場合、チーム全体に問題が生じる可能性があります 。 開発者がCSSを作成するか、何らかのユーティリティがそれを生成するかは関係ありません。 BEMを使用すると、 select要素のコンテキストを導入することでこの問題を解決できます。



BEMの「B」は「ブロック」を表し、ブロックは軽量コンポーネントとして解釈できるため、BEM構文はコンポーネントに向かって一歩前進しています。 Selectは、さまざまな状態（ select-loading ）と子（ select__item ）を持つコンポーネントです。



残念ながら、命名規則を使用してコンポーネントの観点から考えても、セレクターのすべての問題を解決できるわけではありません。 名前の衝突はまだ保証されておらず、名前の意味的な冗長性はタイプミスのリスクを高め、全員が合意を完全に理解している規律あるチームを必要とします。 タイプミスには、2つではなく1つのハイフンの使用、修飾子（-）とブロック（__）の混乱などが含まれます。

救助のためのCSSモジュール

「CSSモジュール」は次のように定義されます。

CSSモジュールは、すべてのクラス名とアニメーション名がデフォルトでローカルスコープを持つCSSファイルです。

ここでの重要な考えはローカルスコープです。



この概念を説明するために、JavaScriptおよびCSSコンポーネントファイルを作成しましょう。

 /* select.css */ .select {} .loading {} .item {} .icon {}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 /* select.js */ import styles from "./select.css"; console.log(styles.select, styles.loading);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは単純な例ですが、裏で起こっていることの多くが含まれています。



CSSファイルには、コンテキストを設定するプレフィックスや特殊文字が含まれていないため、BEMバージョンよりもノイズがはるかに少なくなりました。 プレフィックス.select--を問題なく削除できたのはなぜですか？



JavaScriptファイルのimportステートメントは、CSSファイルをロードし、オブジェクトに変換します。 次のセクションでは、CSSファイルをインポートできる作業環境をセットアップする方法について説明します。



CSSファイルの各クラス名は、オブジェクトのプロパティです。 上記の例では、これらはstyles.select 、 styles.iconなどです。



プロパティ名がクラスの名前である場合、このプロパティの値は何ですか？ これは一意のクラス名であり、一意性により、スタイルが他のコンポーネントに「漏れる」ことはありません。 ハッシュされたクラス名の例： _header__1OUvt 。



「なんて恐ろしい！」と思うかもしれませんが、意味のあるクラス名を理解できないハッシュに変更する意味は何ですか？ 主な理由は、このような識別子がグローバルコンテキストで一意であることが保証されているためです。 このガイドの後半では、識別子を作成するためのメカニズムを変更して、より意味のある外観を持つようにしますが、一意のままにします。



ローカルスコープでCSSを使用する主な利点は次のとおりです。

• 副作用のないモジュール式で再利用可能なコンポーネントに向かって前進し、
• クリーナーCSS
• 各コンポーネントには独自のスタイルファイルがあるため、モノリシックCSSファイルを避けます。

欠点は次のとおりです。

• DOMを読んで理解するのが難しく、
• すべてを機能させるには、環境の初期設定が必要です。

CSSモジュールはプロジェクトのビルドを必要としますが、クライアントとサーバーの両方でさまざまなビルダーがJavaScript用のCSSモジュールをサポートしているため、これは問題ではありません。 CSSモジュールは、ほとんどのUIライブラリと組み合わせて使用​​することもできます。



簡単にするために、この記事ではWebpackモジュールビルダーとReactライブラリに焦点を当てます。

React、Webpack、およびCSSモジュール

アプリケーションをすばやく作成するには、 Create React Appを使用できます。



ドキュメントの指示に従って、新しいプロジェクトをほぼ瞬時に作成して起動します。

 npm install -g create-react-app create-react-app css-modules cd css-modules/ npm start
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出来上がり 、Reactアプリケーションが動作しています：







スタートページは、 App.jsファイルを編集する必要があることを示しています。

 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started, edit {gfm-js-extract-pre-1} and save to reload. </p> </div> ); } } export default App;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Create ReactアプリでCSSモジュールは使用されていますか？ これは、 App.jsファイルを調べることで確認できます。 CSSファイルはインポートされますが、変数には割り当てられず、すべてのclassName属性は動的な値の代わりに文字列を使用します。



この観点から、Create React AppはCSSモジュールをサポートしていないため、このサポートを有効にするには構成を変更する必要があります。

CSSモジュールをサポートするためにCreate React Appを構成する

非表示のアセンブリ構成にアクセスするには、 ejectコマンドを実行する必要があります。 注意：これを行った場合、元に戻ることはできません。

 npm run eject
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、webpackの構成フォルダーを開くことができます。







Create React Appはwebpackを使用してビルドするため、 webpack.config.dev.jsは変更が必要なファイルと同じです（ 実稼働設定のwebpack.config.prod.js-翻訳者のコメント ）。



CSSファイルの処理方法を説明するセクションがあります（ 元の記事ではwebpackの設定に古い構文を使用していますが、ここでは新しい構文を使用しました-翻訳者のコメント ）。

 { test: /\.css$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, ], },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以下に示すようにこのセクションを変更すると、CSSモジュールのサポートが有効になるため、サイトのスタイリングが即座に無効になりますが、コンポーネント自体にさらに変更が必要です。 webpackの設定を変更する場合、CSSクラスの命名規則を変更して、読み取り可能部分とハッシュの両方が含まれるようにして、一意性を確保できます。

 { test: /\.css$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, localIdentName: "[name]__[local]___[hash:base64:5]" }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), require('postcss-modules-values'), ], }, }, ], },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらのローダーは何をしますか？ webpack.configファイルには、スタイルとCSSローダーを説明するコメントセクションがあります。

postcss-loaderは、CSSにautoprefixerを適用します。

style-loaderは、CSSを<style>タグを挿入するJSモジュールに変換します。

css-loaderはCSSパスを解決し、必要な依存関係としてリソースを追加します。

css-loader設定のmodules：trueオプションは、CSSモジュールのサポートを有効にします。 localIdentNameパラメーターは、R​​eactコンポーネントの名前、クラス名、一意のハッシュ識別子が含まれるように、クラス名テンプレートを変更します。 これにより、すべてのコンポーネントを簡単に識別できるため、デバッグがはるかに簡単になります。

ReactでCSSモジュールを使用する

importステートメントの後にconsole.log呼び出しを追加することにより、構成が機能することを確認できます。



import './App.css'を置き換える; に

 import styles from './App.css'; console.log(styles);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザコンソールに次の出力が表示されます。







クラスは一意になりましたが、Reactコンポーネントでは使用されません。 Reactコンポーネントにスタイルを適用するには、さらに2つの手順が必要です。 まず、キャメルケース表記に従ってクラス名を変更する必要があります。 次に、インポートされたクラスを使用するようにclassName属性を変更する必要があります。



camelCase表記の使用はオプションですが、JavaScriptからクラスにアクセスする場合、 styles ["component-name"]よりもstyles.componentNameを記述する方が簡単です。



ソーススタイルシートは次のようになります。

 .App { text-align: center; } .App-logo { animation: App-logo-spin infinite 20s linear; height: 80px; } .App-header { background-color: #222; height: 150px; padding: 20px; color: white; } .App-intro { font-size: large; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリのプレフィックスは不要になったため、今はそれらを削除する良い機会です。 変更されたCSSは次のようになります。

 .app { text-align: center; } .logo { animation: logoSpin infinite 20s linear; height: 80px; } .header { background-color: #222; height: 150px; padding: 20px; color: white; } .intro { font-size: large; } @keyframes logoSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のステップは、コンポーネント内のクラスの使用を変更することです。 結果は次のようになります。

 import React, { Component } from 'react'; import logo from './logo.svg'; import styles from './App.css'; class App extends Component { render() { return ( <div className={ styles.app }> <div className={ styles.header }> <img src={logo} className={ styles.logo } alt="logo" /> <h2>Welcome to React</h2> </div> <p className={ styles.intro }> To get started, edit {gfm-js-extract-pre-2} and save to reload. </p> </div> ); } } export default App;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、コンポーネントはCSSモジュールを使用します。

必要なときにCSSモジュールの境界を破る方法

前のセクションで説明したアプローチはReactプロジェクトの基本ですが、開発者は通常、一般的なスタイルを強調して使用する方法が必要であることにすぐに気付きます。 このコンテキストでは、「一般」とは、コンポーネントが基本スタイルから何かを継承する必要があることのみを意味します。



この一般情報は、変数（色、フォントサイズなど）、ヘルパー（SASSミックスイン）、またはユーティリティクラスで表すことができます。



CSSモジュールは、fromキーワードを使用した構成を可能にします。 異なるファイルのクラス間での構成も可能です。



次の例には2つのファイルがあります。1つは基本的なボタンスタイル用、もう1つは[ 送信 ]ボタン実装用です。 submitButtonクラスは、基本的なボタンスタイルといくつかの追加プロパティの組み合わせで表現する必要があると言えます。

 /* base_button.css */ .baseButton { border: 2px solid darkgray; background-color: gray; } /* submit_button.css */ .submitButton { composes: baseButton from "./base_button.css"; background-color: blue; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

変数を使用する必要がある場合、SASSまたはLessなどのプリプロセッサを使用するか、 webpackで変数のサポートを設定できます 。



CSSの変数に関するwebpackドキュメントの例：

 /* variables.css */ @value blue: #0c77f8; @value red: #ff0000; @value green: #aaf200; /* demo.css */ /* import your colors... */ @value colors: "./variables.css"; @value blue, red, green from colors; .button { color: blue; display: inline-block; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

独自の変数名を使用して、この例を変更できます。 これは、 青などの標準値をオーバーライドすると、値が再定義されたかどうかがわからなくなるため、CSSファイルが理解しにくくなるためです。



変更された例：

 /* variables.css */ @value customBlue: #0c77f8; @value customRed: #ff0000; @value customGreen: #aaf200; /* demo.css */ /* import your colors... */ @value colors: "./variables.css"; @value customBlue, customRed, customGreen from colors; .button { color: customBlue; display: inline-block; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

このチュートリアルでは、まずグローバルなCSSの問題を見てから、CSSのスコープを導入し、コンポーネントの観点から考えることで、CSSモジュールが状況をどのように改善するかを見ました。 また、React Starter Kitを使用してCSSモジュールの実験を簡単に開始できることも確認しました。



CSSモジュールは、フロントエンド全体のアセンブリと組み合わせて使用​​されます。つまり、ブラウザーでのサポートに問題はありません。 ブラウザはサーバーから通常のCSSを受信するため、CSSモジュールを使用してサイトを「破壊」する方法はありません。 それどころか、そうすることで、潜在的なバグの数を減らすことで信頼性を高めるだけです。 CSSモジュールをサポートするように構成されたローダーを備えたWebpackは問題を引き起こしません。したがって、このツールの使用をお勧めします。



プロジェクトでCSSモジュールを使用した場合、私（ つまり、元の記事の著者-約Translator ）があなたの経験について聞きたいと思います！

---

→出版- 「Pactical Guide to React and CSS Modules」という記事の無料翻訳。 投稿者Tatu Tamminen

→ソースコードはreact-cssmodules-demoにあります

→また、 CSS Modules Webpack Demoも注目に値します