フロントエンド開発を長年行ってきた後、CSS モジュール開発について聞いたことがありますか? _html/css_WEB-ITnose

フロントエンドのモジュール開発と言えば、ほとんどの人は js のモジュール開発しか思い浮かばないかもしれません。インターネット上には確かにさまざまな js のモジュール化手法がありますが、CSS のモジュール開発について話している人はほとんどいません。 JS は業界の seajs や KISSY ローダーなどのプログラミング言語であるため、フロントエンド エンジニアはモジュール方式を使用してページを作成し、パッケージ化し、オンラインにすることができます。 CSS の世界ではそのようなことはありません。

その後、CSS の世界に SASS や LESS などの言語が登場しましたが、LESS はモジュール化をサポートすることが非常に適切であると言えます。 @import 'xxx.less ' はモジュール化を容易にするために他のlessファイル(モジュール)をインポートできます。最近、CSS のモジュール化について勉強しているので、モジュール化に関する情報をたくさん調べて、確かに学んだことがあります。今日は、私が知っている CSS のモジュール化開発方法を紹介します。

実際、CSS 仕様ではモジュール関連のコンテンツ、つまり @import 構文についてすでに言及されています。この構文は、現在の主流ブラウザ (もちろん ie6 も含む) でネイティブにサポートされています。 CSS の最も基本的な部分なので、使い方については詳しく説明しません。使い方がわからない場合は、自分で調べてください。なぜほとんどの人が使用しないのでしょうか? おそらく、実稼働環境で @import を単独で使用すると重大なパフォーマンスの問題が発生し、ブラウザーや使用方法が異なるとパフォーマンスも異なるため、非常に憂鬱になるからです。ただし、これは @import が CSS モジュール化のための強力なツールになることを妨げるものではありません。

おそらく @import は CSS モジュール化の問題を解決するために生まれました。まずは CSS モジュール性の利点を確認するための例を見てみましょう:

従来の開発

大規模な Web サイトのホームページを開発したい場合、HTML ヘッドは次のようなスタイルを参照する必要があります:

ページの場合パフォーマンスを向上させ、http リクエストの作成の消費を減らすために、この例では、ページ上のすべてのスタイルが style.css で記述されるように、リンク CSS ファイルの数をできるだけ減らすことを選択します。大規模な Web サイトの場合、このファイルがどれほど長くなるか想像できるでしょう。バグが発生した場合、または何かを変更したい場合、コストは比較的大きくなり、業界には CSS 開発の進歩を加速するために従うべき成熟したベスト プラクティスや慣例が存在しないことがよくあります。特定の機能を変更する可能性があります。コードは CSS 内の別の場所に配置されます。特定の機能を削除したい場合は、ページの CSS コードを簡単に削除しないでください。

この時点で、CSS モジュール性の利点が明らかになります。

モジュール開発

ページは変更されません。引き続きそのスタイル style.css のみを参照しますが、ファイルの内容は次のスタイルに変更されます:

/*xxx ページ エントリ スタイル ファイル style.css*/

@ import './css/base.css';/*基本的なページスタイル*/

@import './css/index.css';

@import './css/header.css';

@import './css/footer.css';

...

上記は複数モジュールのスタイルファイルです

ここでは、style.css内の紛らわしいスタイルを一つずつサブファイルに分割し、モジュールとして。ご覧のとおり、例として、ページのいくつかのリセット スタイルといくつかの一般的なサイト スタイルを css ディレクトリの Base.css に配置し、ヘッダーを header.css に分割し、ページの基本レイアウトをIndex.css ファイルでは、一番下のスタイルが footer.css に配置されます。対応するコードが対応するモジュールに記述されると、シンプルで保守しやすく見えませんか?

モジュール化の @import 形式を使用すると、シンプルなだけでなく、次の利点もあります:

1. ブラウザーのネイティブ サポート

これが、このツールまたはこのモジュール形式のハイライトです。 Less を開発環境で便利に変更したい場合は、追加の js ファイルを導入するか、less のリアルタイム コンパイルなどの方法を使用する必要があります。この @import xxx.css ファイル方法を使用すると、開発段階で簡単に直接デバッグできます。 style.css ファイルを解析するために追加の js ファイルを導入する必要はありません。 style.css ファイルはページに直接導入されており、http ウォーターフォール チャートから、base.css、index.css などが 1 つずつ読み込まれていることがわかります。

2. 特定のモジュールを削除するのが便利です

これはすべての言語でのモジュール化の利点です。たとえば、ある日、PD がホームページの下部のスタイルを変更したいと言いました。以前は、html クラスで直接変更してから、新しいスタイルを style.css に直接追加することが多かったのですが、間違ったものを削除してしまう可能性があるため、古いスタイルは削除しませんでした。継続的なバグ修正により、コードがランダムに記述される可能性があるため、見逃されます。モジュラー ソリューションでは、@import './css/footer.css' 行を直接コメント アウトしてから、新しいスタイルを @import します。この方法では、たとえオンラインになったとしても、PD は効果が良くないと言いました。元のものに戻したいのですが、コメントを変更して再パッケージするだけで非常に便利ではないでしょうか。

3. 日常のさまざまなニーズを簡単に管理できます

さて、ページは準備ができてオンラインになりました。今日、PD が頭痛を抱えていたため、ホームページの右側に機能を追加して提案フィードバック ポータルを追加したいと言いました。以前は、style.css を開く必要がありました。追加する場所を検討するか、最後の場所に何を配置しても最後に直接追加します。モジュール化を採用した後、style.css の末尾に @import './css/フィードバック.css' を追加して、コメントを追加できます: /* 2012-12-06 PD では提案とフィードバックの追加が必要です*/。今後、他のモディファイアも、あなたのモジュールが本当に優れていることをすぐに知ることができます。

4. 共同開発の促進

これは、すべての言語のモジュール化の利点でもあります。大規模なプロジェクトの場合、ファイルを共同開発することが多く、コンフリクトが発生する可能性が非常に高く、細かい箇所を変更してサブミットするとコンフリクトが発生し、バグ修正の10倍の時間がかかります。その後、さらに 10 個の新しいバグが発生するかどうかはまだわかりませんが、モジュール化により、各担当者がどのモジュールを担当するかが明確になり、問題が発生する可能性が低くなります。

5. 複数人での共同作業に便利

依存関係はパッケージ化スクリプトの設定ファイルではなく、エントリファイルに記述されます。このようにして、開発とパッケージ化が分離され、モジュールの追加または削除の際にパッケージング構成を変更する必要がないため、複数人でのコラボレーションが容易になります。

OK、CSS のモジュール化と @import フォームを使用して独自のモジュールを整理する方法について話しましたが、このフォームが目を輝かせると思いませんか?ただし、開発直後にオンラインにすると、ページにいくつかの問題が発生します。いくつかの明らかな問題を取り上げます:

1. @import ファイルは追加のリクエストであるため、ページがロードされる (スタイルがロードされない) とき、しばらくの間ヌードが表示され、待機する必要があります。これらのモジュールを 1 つずつロードしています。

2. リクエストが多すぎて、ページのパフォーマンスが低下し、サーバーへの負荷が比較的高くなります。

3. ブラウザーや書き込みフォームが異なると、読み込み順序が異なる場合があります。

したがって、最良の方法はモジュールをパッケージ化することです。これは、js のモジュール化、モジュール開発、そしてオンライン化する前のパッケージ化と同じなので、完全にオンラインで使用できます。

CSS Combo: CSS モジュールのパッケージ化ツール

js パッケージングと同様に、通常は備え付けのパッケージ化ツールがあります。 CSS の場合、多くの人は ant の concat または grunt の concat を使用します。これの欠点は、CSS モジュールの依存関係をパッケージ化スクリプトの構成ファイルに記述する必要があり、メンテナンスに役立たないことです。新しいモジュールを追加するときに、パッケージ化スクリプトの構成を変更するのを忘れて、それを送信した後、スクリプトが有効になっていないことが判明することがよくあります。しばらく確認してみたら、梱包されていないことが分かりました。

上で紹介した @import フォームを使用して CSS を整理する場合は、サポートするパッケージ化ツール CSS コンボを使用できます:

まず CSS コンボをインストールします:

npm install -g css-combo

次に、エントリ ファイルがあるディレクトリ (この例では style.css) を入力し、次のように入力します:

csscombo style.css style.combo.css

これにより、style.css ファイルが style.combo.css ファイルにパッケージ化されます。 。とてもシンプルです。もちろんgulpと併用することもでき、さらに便利です。

いくつかのベストプラクティス

まず最初に、@import 構文を注意深く読む必要があることを皆さんに思い出してもらいます。

@import "./css/style1.css";

ここでの私の個人的な提案は、相対パスを使用することです。もちろん、オンラインとローカルの絶対パスもサポートされており、チームのコラボレーションに役立つパスにする必要があります。 。

CSS 仕様では、@import は次のように他のスタイルの前に配置する必要があることに注意してください:

@import "./css/style.css";

@import "./css/style2.css ";

body{

margin:0px;

padding:0px;

}

そして次のような書き方:

@import "./css/style.css";

body{

margin:0px;

padding:0px;

}

@import "./css/style2.css";

mod2.css はブラウザーで @import できません。したがって、管理を容易にするために、すべてのモジュールのインポートをエントリ ファイルの先頭に配置することをお勧めします。

使用量を減らしてみませんか

チームの誰もが少ない知識を持っているわけではありませんし、誰もが少ない量を好むわけではありません。さらに、less は gbk エンコードをサポートしていません。デバッグには、ページのセットを開発するときに保持される js の一部を導入する必要があります。 。 。実際、最も根本的な理由は、less と css コンボは異なる問題を解決するため、less は css のプログラミングに重点を置き、css コンボは css モジュールのパッケージ化のみに焦点を当てているためです。

今日はここまでです。もし私が注意深く説明していないことがあれば、お知らせください。個人の WeChat 公開アカウントをフォローして、一緒に学び、一緒に進歩することを歓迎します。羅太から学び、最後まで戦うために毎日記事を共有します。