[翻訳] CSSモジュール - コーディングの未来_html/css_WEB-ITnose

まえがき

これは、Glen Maddern によって 2015 年 8 月 19 日に公開された記事です。主に、以前に翻訳された記事「Understanding CSS Module Methods」で言及されていました。

ここでの翻訳はすべて私の理解に基づいているため、文章ごとに説明しているわけではありません。間違いがあることは避けられず、私のレベルには限界がありますので、皆様にご指摘いただければ幸いです。

テキスト

最近の CSS 開発の考え方の転換点を見つけたい場合は、2014 年 11 月に NationJS で行われた Christopher Chedeau の「CSS in js」スピーチを聞くのが最善です。これが境界線であり、さまざまなアイデアが高速粒子のようにそれぞれの方向に急速に発展します。たとえば、React でスタイルを記述する場合、および React に依存する一部のプロジェクトでは、React Style、jsxstyle、および Radium がその 3 つであり、最新かつ最も独創的で、最も実現可能な方法です。発明が隣接する可能性の探求であるならば、クリストファーは多くの隣接する可能性を創造しました。

これらの問題は、大規模な CSS コード ベースにさまざまな形で存在します。 Christopher 氏は、これらの問題は js でコードを記述することで解決できる可能性があると指摘しました。しかし、このソリューションには独自の複雑さと特殊性が伴います。前述のプロジェクト (React Style、jsxstyle、Radium) で :hover 状態で範囲を処理するメソッドを見てください。この問題はブラウザ側 CSS ですでに解決されています。

CSS モジュール チームは問題の鍵を発見しました。CSS との一貫性を保ち、styles-in-js を使用して記述することです。私たちは依然として CSS を使用することにこだわっていますが、多くの提案を提供してくれた友人に感謝します。

私たちは CSS とそれをより良く書く方法について考えるために知恵を絞ってきました。

ステップ 1: デフォルトのローカル スコープ

css モジュールでは、各ファイルは個別にコンパイルされるため、CSS の短い名前を使用できます。名前の競合を心配する必要はありません。送信ボタンの 4 つの状態の例を見てみましょう

従来の CSS 記述方法

Suit または BEM の名前付け、いくつかの CSS スタイル、および HTML を使用します。コードは次のとおりです:

css コード スニペット:

/*Components/submit-button.css */

.Button { /* Normal のすべてのスタイル */ }

.Button--disabled { /* オーバーライドfor Disabled * / }

.Button--error { /* Error をオーバーライドします */ }

.Button--in-progress { /* In Progress をオーバーライドします */

html コード スニペット:

Processing...

上記のコードは、ネストされたセレクターの使用を避けて、4 つのステータス クラス名を持ち、正常に動作します。以前のスタイル クラス名または参照されているスタイル クラス名との競合を避けるために、セレクターとして大文字で始まる単語 Button を使用します。そして、 --modifier 構文を使用して基本的なスタイルを削除します。

これまでのところ、これは優れた保守可能なコードです。ただし、厳密な命名規則も導入されました。ただし、これは標準の CSS を使用して行う最良の方法です。

CSS モジュールの書き方

CSS モジュールを使用すると、短い名前の使用を心配する必要はありません。このように見えます。

/*Components/submit-button.css */

.normal { /* Normal のすべてのスタイル */ }

.disabled { /* Disabled のすべてのスタイル */ }

.error { /* すべてのスタイルfor Error */ }

.inProgress { /* すべてのスタイル for In Progress */

ほら、どこにも長いプレフィックスを追加する必要はありません。他の言語と同様に、ローカル変数の前に長い接頭辞を追加する必要はなく、CSS に対応するファイル名を submit-botton.css に変更するだけで済むのはなぜでしょうか。

これにより、JS で require または import を使用してロードされた CSS モジュール ファイルをコンパイルできるようになります。

/* コンポーネント/submit-button.js */

'./submit-button.css' からスタイルをインポートします

buttonElem.outerHTML = `Submit`

ページで実際に使用されるスタイル名は、動的に生成される一意の識別子です。 CSS モジュールはファイルを ICSS 形式ファイルにコンパイルします。これにより、CSS と JS 間の通信が容易になります。プログラムを実行すると、次のようなコードが表示されます

Processing...

操作が成功したことを示す同様の結果が得られます。命名規則

まだわかります たとえば、ボタン

/*Components/submit-button.css */

.normal { /* Normal のすべてのスタイル */ }

.disabled { /* Disabled のすべてのスタイル*/ }

.error { /* エラーのすべてのスタイル */ }

.inProgress { /* 進行中のすべてのスタイル */

すべてのクラス名は独立しており、1 つが基本クラス名であり、他のクラス名は独立しています。修正に使用されます。

CSS モジュールでは、すべてのクラスにすべてのプロパティとスタイルが含まれている必要があります

。これは、JS でクラス名を使用する場合に大きな違いをもたらします。

/* こんなことしないでください */

`class=${[styles.normal,styles['in-progress']].join(" ")}`

/* 違いは、別のクラス名を使用することです*/

`class=${ styles['in-progress']}`

/* キャメルケースを使用するのが最善です*/

`class=${styles.inProgress}`

もちろん、コード量に応じて課金する場合は、そのまま続けることができます。

React の例

これは React 固有の CSS モジュールに関するものではありません。ただし、React は、CSS モジュールを使用するときに特に優れたエクスペリエンスを提供します。ここではさらに複雑な例を示します。

/*コンポーネント/submit-button.jsx */

import { Component } from 'react';

'./submit-button.css' からスタイルをインポート

export デフォルトクラス SubmitButton extends Component {

render() {

let className, text = "送信"

if (this.props.store.submissionInProgress) {

className =styles.inProgress text = "処理中..."

} else if (this. props.store.errorOccurred) {

className = style.error

} else if (!this.props.form.valid) {

className = style.disabled

} else {

className = style.normal

}

return {text}

}

}

グローバルな競合を気にせずにスタイルを使用できるため、コンポーネントの開発に集中できます。書き方ではありません。 CSS と js を頻繁に切り替える作業から一度離れると、もう元には戻れなくなります。

しかし、これはほんの始まりにすぎません。スタイルのマージを考慮すると、CSS モジュールは問題外になります。

ステップ 2 すべてはコンポーネントです

前述したように、CSS モジュールでは、各状態に必要なスタイルがすべて含まれている必要があります。

複数の状態が必要であると仮定して、CSS モジュールと BEM の命名を比較してみましょう。

/* BEM スタイル */

innerHTML = ``

/* CSS モジュール */

innerHTML = ``

ちょっと待って、すべての州でスタイルを共有するにはどうすればよいですか?その答えは、CSS モジュールの最も強力なツールである コンポーネント です。

.common { /* 必要なすべての共通スタイル */ }

.normal { composes: common; /* Normal にのみ適用されるもの */ }

.disabled { composes: common; /* のみに適用されるもの無効に適用 */ }

.error { composes: common; /* Error にのみ適用されるもの */ }

.inProgress { composes: common; /* In Progress にのみ適用されるもの */ }

Key composes という単語は、Sass の @extend キーワードと同様に、.normal に .common のスタイルが含まれていることを示します。 Sass は CSS セレクターをオーバーライドすることで実装されます。 cssモジュールはjsで使用しているクラス名を変更することで実装されます。

SASS:

SASS @extend を使用した前の BEM の例を使用します

.Button--common { /* font-sizes, padding, border-radius */ }

.Button--normal { @extends . Button--common; /* 青色、明るい青色の背景 */}

.Button--error { @extends .Button--common; /* 赤色、明るい赤色の背景 */}

これは

にコンパイルされます。

.Button--common, .Button--normal, .Button--error { /* font-sizes, padding, border-radius */ }

.Button--normal { /* 青色、水色の背景 * / }

.Button--error { /* 赤色、明るい赤色の背景 */ }

普遍的かつ独自のスタイルを取得するには、ラベル上のクラス名を参照するだけで済みます。この機能は非常に強力ですが、特殊な状況や落とし穴があることを知っておく必要があります。 Hugo Giraudel がいくつかの質問をまとめています。さらに詳しく知りたい場合は、「SASS の @extend の使用を避けるべき理由」をクリックしてください。

CSS モジュールを使用する

composes キーワードは @extend と似ていますが、作業方法が異なります。例を挙げてみましょう

.common { /* font-sizes, padding, border-radius */ }

.normal { composes: common; /* 青色、水色の背景 */ }

.error { composes: common ; /* 赤色、明るい赤色の背景 */ }

にコンパイルされます

.components_submit_button__common__abc5436 { /* font-sizes、padding、border-radius */ }

.components_submit_button__normal__def6547 { /* 青色、明るい青色の背景*/ }

.components_submit_button__error__1638bcd { /* 赤色、明るい赤色の背景 */ }

JS コードでは、「./submit-button.css」からスタイルをインポートすると

styles: {

common: "components_submit_button__common__abc5436" が取得されます。 、

正常: "components_submit_button__common__abc5436 コンポーネント_submit_button__normal__def6547"、エラー: "components_submit_button__common__abc5436 コンポーネント_submit_button__error__1638bcd"
}

複数のクラス名として表示される、styles.normal または stryles.error を引き続き使用しますDOM内で

Submit

これは、JS コードを変更したり、CSS デバイスを書き換えたりすることなく、複数のスタイルを結合できます。

ステップ 3. ファイル間でコードを共有する

SASS または LESS を使用して作業し、@import を通じて同じワークスペース内のファイルを参照します。変数や関数を宣言し、他のファイルで使用できます。非常に優れた方法ですが、プロジェクトごとに変数の名前が競合する可能性があります。次に、コードをリファクタリングして、variables.scss と settings.scss を記述する必要がありますが、どのコンポーネントがどの変数に依存するかはわかりません。設定ファイルは非常に大きくなります。

より良い解決策 (「Webpack を使用してより小さな CSS を構築する」) もありますが、SASS のグローバルな特性により、依然として大きな制限があります。

CSS モジュールは一度に 1 つのファイルのみを実行するため、グローバル スコープを汚染しません。 JS コードは import または require を使用して依存関係を参照し、CSS モジュールは compose を使用して別のファイルからスタイルを参照します。

/* Colors.css */

.primary { color: #720; }

.Secondary { color: #777; }/* 他のヘルパー クラス... */

/* submit-button.css */

.common { /* font-sizes, padding, border-radius */ }

.normal { composes: common; composes: "../shared/colors.css" からのプライマリ }

コンポーネントを使用するでは、ローカルクラス名と同じように、colors.css ファイルのクラスを参照できます。また、変更されたコンポーネントのクラス名は出力時に変更されますが、CSSファイル自体は変更されず、ブラウザサイドCSSを生成する前にcomposesブロックも削除されます。

/* Colors.css */

.shared_colors__primary__fca929 { color: #720; }
.shared_colors__ Secondary__acf292 { color: #777; }

/* submit-button.css */

.components_submit_button__common__abc 5436 { /* フォント-サイズ、パディング、ボーダー半径 */ }
.components_submit_button__normal__def6547 {}

ton >

実はブラウザ側では普通に自分のスタイルを持たない。これは良いことです。

CSS スタイルを追加

せずに、新しいセマンティック オブジェクトを追加できます。もう少しできることは、 フルサイト開発におけるクラス名と視覚的な一貫性を高め、ブラウザ側のスタイル コードのサイズを減らすことです。

補足: 空のクラスは csso を使用して検出および削除できます。

ステップ 4: 単一責任モジュール

コンポーネントの力は、スタイルを変更せずに要素が何であるかを説明できることです。ページ エンティティ (要素) とスタイル エンティティ (スタイル ルール) を別の方法でマップします。

古い CSS の例を見てください

.some_element { font-size: 1.5rem; color: rgba(0,0,0,0); }

1 つの要素、いくつかのスタイル、シンプル。それにもかかわらず、まだいくつかの問題があります: color、font-size、box-shadow、padding、これらはすべてここで指定されていますが、他の場所では使用できません。

SASS を使用してリファクタリングしましょう。

$large-font-size: 1.5rem;

$dark-text: rgba(0,0,0,0);

@mixin微妙なシャドウ: 0 0 4px -2px; }

.some_element {
font-size: $large-font-size;
padding: $padding-normal;古い CSS スタイルは大幅に改良されており、定義されているのはほんの一部です。実際、$large-font-size はタイプセットであり、$padding-normal はレイアウトです。これらはその意味を表現するための名前にすぎず、どこでも実行できるわけではありません。 box-shadow 変数を宣言したいが、それ自体の意味を表現していない場合は、@mixin または @extend を使用する必要があります。

CSS モジュールの使用

コンポーネントを使用すると、コンポーネント内の再利用可能なクラス名に注釈を付けることができます。

.element {
composes:large from "./typography.css";

composes: dark-text from "./colors.css";

composes:padding-all-medium from "./layout.css";

composes: simple-shadow from "./effect.css";

}

名前空間の代わりにファイル システムを使用して、さまざまな目的に合わせてスタイルを分割します。複数の単一目的のドキュメントを参照するのは自然なことです。

1 つのファイルから複数のクラスを参照したい場合は、次の簡単な方法があります:

/* この省略形: */
.element {
composes: padding-large margin-small from "./layout. css" ;
}

/* は次と同等です: */

.element {

composes:padding-large from "./layout.css";

composes: margin-small from "./layout.css";

各ビジュアルは、Web サイト開発時のクラス名に対応します。上記の方法を使用すると、Web サイトを開発することが可能になります。

.article {
composes: "./layout.css" から中央に配置された flex 垂直方向;
}
.masthead {
composes: "./typography.css" から中央に配置されたセリフ太字 48pt
composes: Paragraph-margin-below; "./layout.css"; から
}
.body {
composes: "layout.css" からの max720段落-margin-below
composes: "./typography.css" からの light paragraph-line-height;
}

これは私がさらに研究したいと思っているテクニックです。私の意見では、Tachyon のようなアトミック CSS テクノロジー、セマンティック UI スタイルのようなクラス名の読みやすさ、単一責任などの利点が組み合わされています。

しかし、CSS モジュールの物語は始まったばかりです。現在または将来、CSS モジュールを使用して、その言葉を広めていただければ幸いです。

始めましょう

CSS モジュールを使用することで、あなたとあなたのチームが現在の CSS 知識や製品を伝達できるだけでなく、より快適かつ効率的に作業を完了できるように支援したいと考えています。構文を可能な限り単純にし、いくつかの例を作成しました。これにより、これらの例のコードを使用できるようになったら、すぐに作業を開始できます。ここでは、Webpack、JSPM、および Browseriry プロジェクトに関するデモをいくつか紹介します。お役に立てれば幸いです。私たちは、CSS モジュールを実行するためにどのような新しい環境が利用できるかを検討してきました。サーバーサイドの NODEJS と Rails を適応させています。

作業を簡単にするために、インストールせずに直接使用できる Plunkr を次に示します。始めましょう

使用する準備ができたら、CSS モジュールのソース コードを見て、質問がある場合は、問題で議論できます。 CSS モジュール グループは規模が小さいため、すべてのアプリケーション シナリオをカバーすることはできません。

ご議論をお待ちしております。

お願いします: 幸せな文章スタイル。