CSSの書き方を最適化する方法

css 記述の最適化: 1. 階層の入れ子は深すぎてはならず、通常は 4 レベル以下です; 2. 要素セレクターの使用は避けてください (後で変更するのに役立ちません); 3. グループ セレクターの使用は避けてください。同じスタイルを定義するパブリック クラスを抽出できるため、より便利です; 4. 導入されるファイルの数を減らし、コンテンツの表示を優先する必要があります。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS を記述するときは、ID、クラスなどの命名、ファイルの構造、共通モジュールの抽出、コードの再利用性、可読性、拡張性、保守性を考慮する必要があります。後でかなりの時間がかかる可能性があります。メンテナンスと修正には多大な努力を払ってください。十分に科学的な CSS を作成することを検討する場合は、次の側面を考慮する必要があります。

まず要件を分析し、必要に応じてヘッダー、ナビゲーション、サイドバー、バナー領域、メインコンテンツ領域、下部などを分離します。必要なものは再利用性が高く、ページングやポップアップウィンドウなどの固定モジュールに帰属させることができないため、専用のcssとjsを別のセクションに分ける、つまりコンポーネント化する必要があります。明確な構造によりメンテナンスが容易です。

次に、それを改良し、境界線、背景、アイコン、フォント、余白、レイアウト方法など、再利用性の高いいくつかの小さな部分を見つけます。これらは頻繁に使用されるため、コードの冗長性が生じ、メンテナンスが困難になります。したがって、この部分は一律に維持および変更する必要があります。

同時に、メンテナンスや継承、カスケード カバレッジを容易にするために、コードの順序も非常に重要です。これらの事故に加えて、コメントを通じてコード セグメントの前にディレクトリまたは名前を追加すると、メンテナンスが容易になります。

結論から言うと、次の点に注意する必要があります:

1. 階層のネストが深すぎてはならず、レンダリング時間が長くなる可能性があります。一般的には 4 層以下が最適です。

2. 要素セレクターの使用は避けてください。

理由:

• 同じ要素が何度も使用される可能性があります。ブラウザがトラバースすると、すべての要素がトラバースされます。これは不要です。

• 要件とコード構造はいつでも変更される可能性があり、他のページで再利用されたり、このページにコンテンツが追加されたりする可能性があるため、要素セレクターを使用して何かを決定してください。 。

3. グループ セレクターの使用は避けてください。

例:

.header ul li,.content ul li,.footer ul li{border-left:1px solid red};

この場合、パブリック クラスを抽出して同じスタイルを定義する方が便利です。

4. ファイル紹介の数と順序

ファイルリクエストの数はできる限り少なく、内容は優先順位で表示され、ファイルは順番にロードされる必要があります。 、ユーザーがより重要なものを最初に確認できるようにします。

矛盾を考慮して、スタイル名を付ける際に、デザイン案の中でスタイルが似ている機能の異なる2つのモジュールを、「ニュース」と「アバウト」など、内容別に名前を付けることは考えられませんが、カテゴリー、機能、ページから検討してください。人々が名前と構造を結び付けやすくします。 CSS の記述に習熟したら、CSS プリプロセッサを使用して効率を向上させることができます。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSの書き方を最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。