CSSの書き方

CSS コードが明確であることは非常に重要です。この部分が主要な導入部分です。

通常、ページごとに参照する CSS は 1 つだけですが、大規模なプロジェクトの場合は、CSS ファイルを分類する必要があります。

css の性質や目的に応じて、css ファイルを「パブリックスタイル」「特殊スタイル」「スキンスタイル」に分けてこの順番で参照することができます。それで、それらは何ですか？

パブリック スタイルは最も重要な部分です。比較的小規模なプロジェクトの場合、CSS は 1 つだけ導入します。この CSS のスタイルはパブリック スタイルで、通常は「ラベルのデフォルト値のリセットと設定」が含まれます。 (異なるブラウザ間の違いを排除するため)、「背景画像の呼び出しとフロートやその他の均一に処理する必要がある長いスタイルのクリア (それぞれを個別に処理する必要がないように)」、「ユニバーサル Web サイトのレイアウト」、「ユニバーサル「モジュール」とその拡張機能、「コンポーネントとその拡張機能」、「機能スタイル」、「スキン スタイル」。

特殊スタイルとは、メンテナンスを容易にするために、メンテナンス率の高いコラムやウェブサイト全体とは大きく異なるページに、独自に特殊なスタイルを導入することを指します。

スキン スタイルとは、製品にスキン変更機能が必要であることを意味するため、管理を容易にするために色や背景などを抽出してここに配置する必要があります。

CSS ファイルはパブリック スタイル、特殊スタイル、スキン スタイルに分類されていますが、内部的にはどのように CSS ファイルを分類すればよいでしょうか? (この部分が焦点です)

リセットしてデフォルトの CSS コード。これは、デフォルトのスタイルとブラウザの違いをなくし、一部のタグの初期スタイルを設定して、後の作業の重複を減らすためです。独自の Web サイトのニーズに応じて設定することも、Yahoo エンジニアが提供する CSS 初期化コードなど、他の人が作成した初期化コードを使用することもできます。コードのこの部分は CSS の先頭に配置されます。

均一に処理された CSS コード。ここでは、背景画像を一律に呼び出してフロートをクリアできます (より汎用性の高いレイアウト、モジュール、元のドキュメントのクリア コンテンツを指します)。実際、Yahoo のエンジニアが提供する CSS 初期化コードには、フロートをクリアするための CSS コードが含まれています。 。コードのこの部分は、リセットおよびデフォルトの CSS コードの下に配置されます。

レイアウト (グリッド): ページをいくつかの大きなブロックに分割します。通常、ヘッダー、本文、メイン列、サイド列、末尾などが含まれます。よく使われます！

モジュール: 再利用可能なより大きな意味論的な全体。ナビゲーション、ログイン、登録、リスト、コメント、検索など。よく使われます！

コンポーネント (ユニット): 通常、細分化できない比較的小さな個別であり、ボタン、入力ボックス、読み込み、チャートなどのさまざまなモジュールで再利用されます。よく使われます！

機能: いくつかの一般的に使用されるスタイルの使用を容易にするために、これらの頻繁に使用されるスタイルを分離し、必要に応じて使用します。通常、これらのセレクターにはフロートのクリアなど、固定のスタイル パフォーマンスがあります。一般的には使用されず、悪用もされません。

スキン: スキンタイプのスタイルを抽出するために、スキンを変更する Web サイトに使用する必要があります。スキンを変更しない Web サイトは悪用できないため、一般的には使用されません。

ステータス: いくつかのステータス クラス スタイル。まれに使用されます。

css 命名規則

重要: クラス セレクターを使用し、ID セレクターを破棄してください。 IDはページ内で一意であるため、IDをセレクタとしてCSSを記述すると再利用ができず、クラスの利点は再利用性であり、プライバシー度は高くありません。したがって、私は通常、JavaScript の HTML では ID を選択しますが、CSS ではクラスのみを使用し、ID はまったく使用しません。そうすることで、実際にはパフォーマンスと動作が混合されるのではなく、分離されます。

それでは、子孫セレクターはどのように使用すればよいのでしょうか? 私たちは、先頭に 1 文字「-」が付いておらず、長さが 2 以上のクラス セレクターが子孫セレクターであることに同意します。例: .g-date .u-rightArrow{ float: right;} これは不適切です。.u-rightArrow{ float: right;} として直接記述できます。また、セマンティック タグは子孫セレクターにもなり得ます。たとえば、.m-list li{}。前の文は、.m-list div{} など、セマンティックではないタグは子孫セレクターとして適していないことを意味しており、このような記述は汚染を引き起こす可能性があります。

css コード形式

1. セレクター、属性、値はすべて小文字です。

この点は非常に重要です。xhtml 仕様によれば、すべてのタグの属性と値は小文字でなければなりません。xhtml の方が標準であることがわかっているため、それに従うのが最善です。したがって、セレクターは小文字でなければなりません。これは非常に必要です。この場合、クラス名をキャメルケースで記述することはできません。たとえば、class="u-leftArrow" は実際には不規則です。同様の意味を表現できる class="u-left_arrow" と記述した方がよいでしょう。

2. セレクターの定義は 1 行で完了します。

利点: セレクターの検索と読み取りが簡単、新しいセレクターの挿入と編集が簡単、モジュールの識別が簡単など。さらに重要なのは、余分なスペースを削除してコードをコンパクトにし、改行を減らすことができることです。想像してみてください。各行に属性名と属性値が 1 つしかない場合、大規模なプロジェクトの場合、セレクターを見つけて読み取るのは困難になります。セレクターを 1 行で記述すると、セレクターは 1/6 に短縮される可能性があります。 1/10、これはまだ非常に客観的です。

3. 最後の値もセミコロンで終わる必要があります。

実は、中括弧の終了前の値のセミコロンを省略することもできますが、変更・追加・保守作業時に無用なミスや手間が発生します。たとえば、最後に属性を追加する場合、これまでに最後にセミコロンを追加していない場合は、新しく追加した属性の前にセミコロンを追加する必要があり、追加しないとエラーが発生します。ブログ投稿で、ボックスに JSON データを追加するときに発生した中国語フォントが四角く表示される問題を解決しました。

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