[翻訳] CSSモジュールを理解するmethods_html/css_WEB-ITnose

フロントエンド開発が日々変化する世界において、インパクトのあるコンセプトを見つけるのは非常に難しく、それを正確に伝えて人々に試してもらいたいと思わせることはさらに困難です。

CSS に目を向けると、CSS を作成する際のツール側での最大の変更は、SASS などの CSS プロセッサーの使用であり、これが最適であると認識されている可能性があります。別のソリューションを提供する PostCSS もありますが、これはブラウザがサポートしていない構文を入力し、ブラウザがサポートしている構文を出力するものとほとんど変わりません。 (前回の記事と理解が違う場合は「PostCSSの誤解」をクリックして詳細をご覧ください)

ここでCSSモジュールの概念を紹介します。この記事では、このテクノロジーを紹介し、このテクノロジーのいくつかのポイントについて説明し、その使用方法について説明します。

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

公式定義:

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

CSS モジュールは CSS ファイルであり、このファイルにはすべてのクラス名とアニメーション名が含まれていますデフォルトはローカル スコープです。

実際には、上記で説明したものよりも少し複雑で、デフォルトではクラス名はローカル スコープ内にあり、いくつかの構成、ビルド プロセス、および理解するのが難しいものがいくつか含まれます。

最後に、関連する CSS コードをコンポーネントに編成し、名前の競合を回避する方法として CSS モジュールを定義しました。 (コンポーネントの名前については心配する必要はありません。名前はビルド プロセス中に自動的に生成されます)。

CSS モジュールはどのように機能しますか?

CSS モジュールはビルドプロセス中に処理される必要があり、それ自体では何も実行されません。これはwebpackまたはbrowserifyのプラグインのようです。その仕組みは次のとおりです。js モジュールで CSS モジュール (例: React コンポーネント) を呼び出すと、CSS モジュールは動的スコープ内のクラス名またはファイル内の名前空間に基づいてオブジェクト リテラルを宣言します。 js によって文字列形式で呼び出されます。

例を挙げて説明しましょう。

単純な CSS ファイルを作成します。.base クラスはプロジェクト内の唯一のクラスではなく、実際のクラス名としては使用されません。これは、js モジュールで使用されるスタイルのエイリアスに相当します。

すごいです

ここでは、JS コンポーネントでの使用方法を見ていきます。

.base {  color: deeppink;  max-width: 42em;  margin: 0 auto;}

上記のコードは、(webpack ビルド ツールのデフォルト設定を使用して) 次のコードを生成します:

import styles from './styles.css';element.innerHTML = `<div class="${styles.base}">  CSS Modules are fun.</div>`;

<div class="_20WEds96_Ee1ra54-24ePy">CSS Modules are fun.</div>

クラス名、設定を通じてクラス名に特別なプレフィックスを追加することも、短い名前を使用することもできますが、これは重要なことではありません (短い名前は CSS スタイルが少ないことを意味しますが)。

重要な点は、クラス名が動的に生成され、一意であり、スタイル シートに正しくマッピングされることを指摘することです。

CSS モジュールに関するいくつかのポイント

上記は CSS モジュールがどのように機能するかを説明しています。あなたの心の中には疑問があるはずです。それを一つずつ解決していきましょう。

生成されたコードは非常に醜いです!

クラス名は美しさのためだけのものではありません。その目的は要素にスタイルを適用することなので、注意を払う必要はありません。

デバッグは簡単ではありません

ビルドプロセスを通じて生成されたコードはデバッグが簡単ではないというだけです。 Sass もデバッグは簡単ではありませんが、ソースマップを使用でき、CSS モジュールも使用できます。実際、クラス名は生成されますが、モジュール内の特定のスタイルに従ってデバッグすることは難しくありません。デバッグしているモジュールがわかっている場合は、対応するモジュールに移動して、対応するスタイルを見つけることができます。

スタイルは再利用できません

再利用可能であることは事実ですが、CSS モジュールの目的はスタイルをコンポーネント化し、グローバルな競合と依存関係を排除することです。

さらに、いくつかの一般的なスタイルなどのグローバル クラスを定義することもできます (global() を使用)。これらのクラス名は、js コンポーネント内でも呼び出すことができます

._20WEds96_Ee1ra54-24ePy {  color: deeppink;  max-width: 42em;  margin: 0 auto;}

CSS モジュールは、SASS の @extend などの既存のモジュールを通じて拡張することもできます。スタイルを直接コピーする代わりに、セレクター スタイルをマージします。

:global(.clearfix::after) {  content: '';  clear: both;  display: table;}

CSS モジュールには、webpack、browserify などの他の構築ツールが必要です

これは、SASS が .scss ファイルを正しい CSS スタイルにコンパイルし、PostCSS がスタイルをブラウザ互換コードに処理するのと同じです。すでにビルド ツールを使用しているため、これは簡単です。

なぜこれらの点がまだ議論されているのでしょうか?

将来の CSS モジュールがこのようになるかどうかは今のところわかりませんが、これがスタイル記述の方向性であるはずです。大規模な Web サイトで使用される多数のグローバル スタイルは、より小さなコンポーネントに分割するのには適していません。

強力かつ脆弱な、世界的にユニークな CSS 名。 CSS モジュールであっても、将来的には他のツールであっても。私たちは皆、グローバル スタイルを公開し、同じスコープ内のスタイル間の名前の競合を回避できるソリューションを見つける必要があります。

はじめに

上で述べたように、CSS モジュールを使用するには、webpack または browserify をビルドする必要があります。

Webpack

Webpackを使用するには、まずwebpack.config.jsファイルを変更し、以下の設定項目を追加し、CSSモジュール機能を有効にします。

{  test: /\.css$/,  loader: 'style-loader!css-loader?modules'}

以上配置会在你的页面插件

{  test: /\.css$/,  loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules')}

Browserify

使用Browserify，直接用命令行，代码参数有点多。可以使用npm来运行命令，配置一下package.json文件，代码如下：

{  "scripts": {    "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"  }}

解释一下，运行npm build，就相当于调用build对应的相关命令。处理src/index.js生成为dist/index.js，并通过css-modulesify插件编译dist/main.css样式。如果想通过Autoprefixer插件添加浏览器前缀，命令可改成下面这样：

{  "scripts": {    "build": "browserify -p [ css-modulesify --after autoprefixer -o dist/main.css ] -o dist/index.js src/index.js"  }}

--after 在编译完样式后再运行autoprefixer插件。

总结

现在，CSS模块系统的生态圈还太小，但我相信，随着越来越多的人认识到，这是适应于从小到大项目的解决方案，它会发展得越来越好。

CSS模块化思想是正确的路。我也不是说本文介绍的方法，就是最好的解决方案，但已经可以把CSS书写得，具备以下特征：模块化，作用域或可重用。

想了解更多相关信息，可参阅CSS模块项目创建人，Glen Maddern的《this introduction to CSS Modules》的文章。