HTML はあまりにも単純なので、実際のプログラミング言語とはみなされない、という人もいます。もちろん、同様に見なされているテクノロジーがもう 1 つあります。それが CSS です。正直に言うと、CSS のコードはそれほど複雑ではなく、それが何であるかを理解するだけで、要素の幅と高さ、タイプとサイズを制御することができます。コンテンツのフォント等の色等しかし、実際には単なるルール以上のものです。知っていることと書くことは同じですが、より良い記事を書くことができる人が常に存在するようなものです。使えるということと、科学的に使うということと、柔軟に使うということの間には、まだギャップがある。この記事では、CSS で考えられるいくつかのベストプラクティスについて説明します。

メンテナンス性の高い CSS

CSS の特徴は何ですか?

簡単に言うと、使用方法: インライン、埋め込み、外部、インポート。要素のスタイルを設定する方法: 要素のタグ名、クラス名、ID、さまざまなセレクター、およびそれらの組み合わせ。したがって、標準的な制限がない場合は、間違いなく混乱が生じ、CSS コードの保守が困難になります。

CSS コードを効率的に整理するにはどうすればよいですか?

明確な構造と個別のモジュールにより、コードの再利用性と保守性が向上し、開発の複雑さが軽減されます。では、どのように整理すればよいのでしょうか？

最初はコードファイルを整理することです。コードファイルは、一般カテゴリとビジネスカテゴリの 2 つの大きなカテゴリに分類できます。次に、リセット用のファイルがあります。一般的な名前は、reset、default、normalize などです。

ページダイアログボックス、プロンプトボックス、ヘッダー、ボトム、サイドバーなどの共通モジュールといくつかの基本スタイルを保存するために使用されるファイルがあり、多くの場合 mod、common などの名前が付けられます。コードの再利用を向上させるために、この方法で各ページを参照するために使用されます。

さらに、古い IE ブラウザと互換性のあるスタイルを保存するにはファイルが必要です。これには次の 2 つの利点があります。

1. 非 IE ブラウザのスタイルファイルを読み込む負担を軽減します。 🎜>

2. 将来、古いバージョンの IE のサポートを終了する場合は、1 つのファイルを変更するだけでよく、変更するために複数のファイルを検索する必要はありません。もちろん、ブラウザーの互換性の問題に対処するときの 1 つの原則は、互換性の問題が発生しない他のソリューションがあるかどうかです。そうでない場合は、互換性が必要な部分を別のファイルに配置します。

残りの css スタイルファイルは、ビジネスモジュールに使用されます。原則として、各モジュールのスタイルファイルは異なるフォルダーに配置されます。

これは問題を引き起こす可能性があります。ページは大量のファイルをインポートする必要があるのではないでしょうか?ページの読み込み中に http リクエストが大量に発生するのではありませんか?実際、ファイルの分割は開発とメンテナンスを容易にするためだけであり、公開するときに複数のファイルを圧縮して 1 つのファイルに結合するために使用されるため、複数のファイルを導入することを心配する必要はありません。

上記はファイルの編成に関するものであるため、スタイルステートメントも特定のルールに従ってファイル内で編成する必要があります。たとえば、モジュール内の要素のレベルに従って、それらが同じレベルにある場合は、ページ上の要素の位置に従って、上から下へ、または複数の要素がある場合には左から右へ。同じ宣言を共有する場合は、共通のスタイルを最初に宣言する必要があります。これでは十分ではないと思われる場合は、less や sass など、変数、継承、操作、関数などの CSS 動的言語機能を提供する、より高度なメソッドを使用できます。

上記はいくつかの一般的な方向から説明されています。以下で特定の点について説明します

CSS リセットを使用してブラウザーの表示効果を統一します

まず、html のラベルは次のとおりです。元のスタイルはそのままですが、問題は、ラベルのデフォルトのスタイルがブラウザごとに異なることです。いくつかの違いが開発に問題を引き起こしました。このスタイルファイルは、undohtml.Css と呼ばれるものでした。それ以来、さまざまなリセット計画があり、そのうちの 1 つは「しばらくホット」でした。この計画には合計 1 行のコード *{margin: 0;padding: 0;} が含まれています。すべてのラベルのデフォルトのマージンとパディングのスタイルがリセットされました。ただし、欠点の 1 つは、その後の開発が複雑になり、全体的な開発効率を効果的に向上させることができないことです。さらに、このソリューションのパフォーマンスも低く、ページ要素が多い場合にはページレンダリングのパフォーマンスに影響します。したがって、人々は徐々により良いリセット方法を模索しています。現在、Eric Meyer によって開発された Reset CSS や Yahoo のフロントエンドテクノロジーチームによって開発された YUI Reset CSS など、多くの人気のあるリセットソリューションがあります。実際、すべてのプロジェクトに適した 1 つのソリューションは存在しないため、他の人のソリューションを参考にして、自分のプロジェクトに適したソリューションを設計するのが最善です。

次の点を考慮する必要があります:

(1) HTML5 の新しいタグは、デフォルトの表示スタイルが以前のバージョンの IE で定義されていないため、表示スタイルをリセットする必要があります。

(2) ブラウザーのpadding、margin、borderタグの違いは主に、これら3つのスタイルに関連するデフォルトのスタイルによって引き起こされますが、すべての要素のmargin、padding、borderをリセットする必要はありません。 . 実際の状況に基づいている必要があります。

(3) フォント設定