HTML と CSS アーキテクチャのちょっとした経験_html/css_WEB-ITnose

CSS自体は非常にシンプルで始めやすい言語と言えます。ページまたは中小企業 Web サイトを作成する場合、CSS 要件は非常に低くなります。文法に精通しており、英単語の意味を推測できれば、基本的に一連のパターンを説明することができます。さらに、さまざまな補助ソフトウェアが市場に出回っています。

比較的大規模な Web サイトの場合、CSS アーキテクチャの要件は比較的高くなります。たとえば、抽出してモジュールにできる公開パーツがいくつかあります。これをモジュール性と呼びます。

モジュール化の利点は何ですか?

さまざまな Google 検索結果を調べずに、私が頭の中で考えることができる主な点は次のとおりです:

1. 無意味な開発作業負荷を軽減する?? 特定のスタイル コードを他のファイルにコピーして貼り付ける必要がありません。

2. コードの保守が簡単です。モジュールのスタイルが変更された場合は、css ファイルを変更するだけで済みます。

3. 対応するコメントとディレクトリ構造により、プロジェクト全体の HTML と CSS コードがより明確になります。

しかし、モジュール化は時々非常に混乱を招きます。

Web サイトの実際の開発と保守のプロセスでは、通常、html によって提供されるモジュールが機能に応じて保守されます。しかし、CSSのいわゆるモジュール化とは、UIの表現をベースとしたモジュール化を指しており、モジュールを分割する基準は統一されていません。

css自体の構成としてはcssに合わせてモジュールを分けたいと思います。ただし、htmlの場合は、下流部門に開発用に提供する場合も含めて、当然htmlモジュールを提供する必要があります。彼らは CSS がどのように分割され、統合されているかを気にしません。

そこで、私は次のアイデアを思いつきました:

css は 5 つの層に分かれています

ベース層?? 全体に共通するいくつかの基本スタイルと基本モジュール スタイル層です。サイト（ここにはクリアの0が含まれています）を入れます。この層は、UIの表現に応じてモジュールを分割することに相当します。優れたUI仕様に連携すれば、サイト全体の基本モジュールUIの一貫性も確保できます。大規模な Web サイトの場合、これは専門的な UI デザインによって保証される必要があります。信頼できるものであれば、ベースレイヤーを Web サイトのスタイルコアパッケージとして開発することもできます。

モジュールレイヤー?? 機能モジュールスタイルレイヤーです。 CSS のこの部分は、基本モジュール スタイルと非公開スタイルで構成されます。

パッチレイヤー?? はパッチレイヤーです。機能モジュールを使用してページを結合する場合、モジュールに含めることができないマージンやその他のスタイルをパッチに配置します。 (例えば、ページに突然バナーを追加する必要が生じた場合など)

pages レイヤー?? モジュールレイヤーとパッチレイヤーからのものをインポートメソッドを使用してページに導入するスタイルシートファイルです。 CSS をマージできるソフトウェア (Google でキーワード Merge を検索するといくつか検索できます) を使用して、インポートされたすべてのファイルをこのページ ファイルに圧縮し、オンラインに置きます。

タグ層 ?? トップタグは実際に圧縮されてオンラインで公開されるCSSコードに相当し、開発コストはかかりません。これにより、基本的に、各ページの CSS に対して http リクエストが 1 つだけ存在することが保証されます。ローカルのモジュール開発にも対応できます。

html の対応構造

html は 4 層に分かれていることに相当します。

ベースレイヤー ?? CSSのベースレイヤーに相当します。 UI標準スタイル全体と標準スタイルHTMLコードのリファレンスファイルです。

モジュール層?? CSSのモジュール層に相当します。他の開発者に提供することができ、モジュールのすべてのステータスをそこに書き込む必要があります。これにより、バックエンド開発者が特定の関数のコードを簡単に見つけられるだけでなく、完全なページを提供するために状態の一部が犠牲になる場合があるという問題も解決されます。たとえば、ボタンに 2 つの状態があると、ページが簡単に歪んでしまいます。ページに配置しないとバックエンドエンジニアが開発するのに不便になります。もちろん、以前はページ上の他の州に関するコメントを書いていましたが、それでも問題があり、コメントを付けたりコメントを解除したりするという無意味な作業を頻繁に繰り返す必要がありました。

ページレイヤー?? 組み立てられたページです。モジュールがバックエンド エンジニアに特定のコードを提供したので、ページは何をするのでしょうか?その目的は、各モジュールをどこに配置する必要があるかを自分自身や他の人に伝えることです。マクロのプレビューも提供されます。プレビューがないのはいつもイライラします。

dev レイヤー?? 実際には、これは純粋に開発用です。さまざまなバックエンド言語には、共通モジュールの管理に使用できるインクルードがあります。しかし、htmlはそうではありません。このため、DW には強力かつ不正なテンプレート機能も提供されています。でも使っている人は少ない気がします。わかりませんが、操作が複雑だからでしょうか？柔軟ではないですか？それとも大量のコメントが生成されたからでしょうか？下品に見えますか？わかりません、とにかく持っていません。幸いなことに、xxx の人々が HTML のインクルード問題を解決するローカル プログラムの開発に協力してくれました。 dev ディレクトリ内のファイルは、このプログラムの構文要件に従って書き込まれます。モジュールの下に URL アドレスを指定すると、HTML コードが自動的にマージされ、ページの下にファイルが生成されます。