CSS フレームワークや CSS モジュールについての私の考えは常に漠然としていて、完全にトレンドに従っています。最近仕事で遭遇した問題により、私はこの問題に注意を払うようになりました。私は、計画、デザイン、公開のすべてを 1 人で行うことに慣れています。プロジェクトを複数の人が協力して短期間で完了する必要がある場合、スタイル ファイルの計画、CSS モジュールとフレームワークの考え方が特に重要です。
最近、次の質問が私を悩ませています。Web サイトのフロントデスクで複数の人が同時に作業している場合、Web サイト全体のスタイルが統一されるように、どのようにメンバーを分散するか、スタイル ファイルの構造は合理的か、重複や冗長性がなく、効率が最も高いですか?クラスメイト数人に相談した結果、以下のような答えが得られました。 スタイルの統一については、まずみんなで話し合ってスケッチを作り、そのスケッチをもとに1人が標準的なスタイルのページを作成し、その後共同作業を開始しました。残りは継続的な修正でした。制作面では、サイト全体でいくつかの異なるcssファイルが設定されており、各担当者が異なるスタイルファイルを担当しています。
言うのは簡単なことでも、実際に実行してみるとそう簡単ではありません。幸いなことに、デザインに関しては、まだリスクを冒すことはできません。第 1 レベルと第 2 レベルを合わせて 20 ページ未満なので、1 人で処理できます。制作過程について教えてください。
(1) CSSの名前、記述順、コメントを標準化する。
この点の重要性は言うまでもありませんが、複数の「強力にパーソナライズされた」命名メソッドがスタイル シートに同時に表示されることがどれほど混乱を招くかは想像するのが困難です。名前付けには、text-box、text-content、text_box、または大文字と小文字の「ハンプケース」書き込み、textBox、textContent など、中央の「-」、「_」記号接続を使用できます。コメントは 3 つのレベルに分類できます。コメントの主要なカテゴリは、ヘッダー、コンテナー、フッターなどの CSS ブロックを分割するために使用されます。セレクター内で注釈を付けます。コメントを使用するか、一部の特殊効果に関するコメントをハックします。記述形式では、水平方向のインデントを使用して階層関係を示すことができます。
(2) レンダリングに基づいてスタイルシートの構造分割を決定する
CSS ファイル構造の分割については、インターネット上で多くの紹介があり、それらは通常、layout.css/main.css/footer.css/header.css/reset.css などのいくつかのファイルにすぎません。最善のものはなく、最も適したものがあるだけであることを理解してください。最適なスタイルの分割は、普遍的なものではなく、HTML 構造自体に密接に依存する必要があります。
CSS ファイルの配布には、将来の分業とコラボレーションを容易にするだけでなく、非常に重要な点もあります。バイト数が小さい場合は、できるだけ圧縮して同時接続数を減らすことができます。サイズが大きい場合は、ダウンロード速度が遅くなりすぎてスタイルの読み込みに影響が出るのを防ぐために分割できます。これらは、ケースバイケースで対処する必要がある特定の問題です。たとえば、検索エンジンやポータル ホームページなど、アクセス数の多いページの場合は、ページ内に CSS を記述するのが最適です。
CSS スタイル構造を事前に決定します。
ソースコードの例
reset.css /*ページスタイルのリチャージ*/
header.css /*サイト全体のヘッダー スタイル*/
footer.css /*完全なサイトのフッター スタイル*/
public.css /*サイト全体のパブリックモジュールスタイル*/
Index.css /*ホームページの独自のスタイル*/
container.css /*レベル 2 以下の本文スタイル*/
print.css /*印刷スタイル*/
ie.css /*IE ハック*/
(3) 分業と連携
ステージが準備され、歌が始まります。すべての公開テキスト リストと、画像とテキストの混合リストを検索します。公開モジュールでの書き込みは 1 名、先頭と末尾は 1 名、二次ページ枠は 1 名が担当します。個人用の部分は最後までお任せします。
実際の運用にはまだ多くの問題があります。コードの冗長性は避けることができず、最小限に抑えることしかできません。効率を高めるためには、犠牲を払わなければならない場合もあります。