CSS をより効果的に管理するために、Sofish は以下で「モジュール型 CSS」の概念と視点を説明します。これがあなたのお役に立てば幸いです。
私はCSSを学び始めた初期に「モジュールCSS」という概念に触れましたが、よく理解できませんでした。理由は簡単です。ほとんどのコードがブログのデザインのためのものであり、ブログほどの小さな構造であれば、コードの量が少ないため、多くの CSS ファイルを用意する必要がありません。それ自体は小さく、さまざまな式を使用するページ テンプレートがあまりないため、少ない方が管理が便利です。したがって、モジュール式 CSS についての私の理解は非常に混乱しており、そのため、次の分割方法が非常に合理的であると考えるようになりました
。
layout.css //ページのレイアウトを管理する
typeset.css // グラフィックとテキストの配置と
color.css // カラーマッチングの一元管理
print.css //印刷効果のスタイル
ie.css // IE のハッキングを分離するのは真実ではありません。私は最近働いていて、その会社の Web サイトに接触しました。リーダーは独自の CSS 記述仕様と、いくつかの統一された HTML 仕様を作成する必要がありました。チャンネル/ページ/ストア。そのとき初めて、上記の区分はまだ理想主義的すぎることに気づきました。個人的には以下のような分割方法が考えられます。まずそれを書き留めてから、これら 2 つの分割方法を比較して、CSS ファイル管理をより適切に解決する適切な CSS モジュール分割方法を見つけてみましょう:
reset.css
header.css // ヘッダーのすべてのスタイル
Container.css // ヘッダー/ボトムを除く中間領域のスタイル
footer.css // ボトムスタイル
印刷.css
つまり.css
3 つの異なる CSS ファイルがあることがわかります。最初の分割方法は良いアプローチですが、「モジュール化」とはいえ、表示されるコンテンツのスタイルが分離されているため、管理が面倒です。ただし、誰もが各 CSS ファイルの内容を 100% 理解することは不可能であるため、次のような問題が発生する可能性があります。
1. 効率の問題と最終的な目標は Web サイトのコンテンツにあります。すべての CSS を変更するには何回かかるでしょうか?その結果、元々は単純な変更だったものが複雑になり始めました。さらに、複数の変更が行われると、何かを見落とし、さらなるデバッグが必要になる可能性があり、最終目標の実現が遅れるだけでなく、効率の問題も発生します。
2. CSS ファイルの呼び出しはできるだけ少なくします。 通常、Web サイトは先頭、中間、下部に分かれていますが、新しいチャネルやページなどを作成する場合、先頭と下部は変更されません。真ん中の部分だけが変わります。この方法では、HTML と CSS のモジュール性が一貫していないため、すべての CSS ファイルを呼び出す必要があります。これにより、サーバーへの負担が大きくなります。これは 1 つの側面です。もう 1 つの側面は、新しいページ内の一部の要素が他のページと競合する場合、優先順位の選択に関する多くのコードを記述する必要があり、コードの量が増加する可能性があることです。これはどれも私たちが望んでいることではありません。 header.css と footer.css を分離する必要があるのはこのためです。
3. 複数人での協力の問題点 複数人で作業している場合、誰かが先頭でナビゲーションを完了し、誰かが下部の検索バーを完了し、誰かが新しいプロジェクトの構築を完了するという役割分担になる可能性があります。真ん中のページ。このように、全員が複数のファイルを同時に変更しており、変更する内容は異なります。サーバーに更新する場合は、まず比較してから更新する必要があります。 (もちろん、今ではバージョン管理などのソフトウェアがあります。しかし、同時に作業する場合、バージョンも問題になります。おそらくアップデートでは変更されないと信じる必要があります。)
結論:
もちろん、上記の分割方法は単純なモデルにすぎません。さまざまな Web サイトのアーキテクチャでは、より詳細な分類が必要になる場合があります。ここで思い出しておく必要があるのは、モジュール式 CSS を使用する場合、単純な分割ではなく、管理、変更、および複数の人々の間でのコラボレーションを促進するためにここにいることを常に明確にする必要があるということです。何か提案があるとすれば、CSS のモジュール性は HTML のモジュール性と一致するべきだと思います。ここでのコンセンサスは、ファイルの分割であっても CSS コンテンツの分割であっても、HTML のモジュール性と一致しているということです。これは私たちの仕事にとってより有益になります。
そして、あなたはどう思いますか？