Webページ編集におけるCSSスタイルシートスキルまとめ_体験交流

1. コメントについて
xhtml CSSサイトを作成する場合、CSS内のコメントは非常に重要です。 CSS スタイルを作成するときは、気軽にコメントする習慣を維持する必要があります。 EditPlus などのハイライト機能のあるエディタでは、C 言語でよく使われる「/********」が一般的であるため、一般的に「/* コメント内容 */」の形式でコメントを書くことに慣れています。 *******/」などのコメントは無意味であり、区切りとして意味のない内容を大量に記入する必要はありません。コメント付きのドキュメントは、Web サイトのオリジナルの CSS ドキュメントとして機能します。Web サイトを公開するときに、CSS 圧縮ツールを使用して CSS を圧縮し、出力された CSS からコメントを削除すると、ファイル転送の効率が向上します。

2. 名前付けについて

CSS ファイルに名前を付けるときは、意味的に正しい英語名または略語を使用することを好みますが、珍しい部分には部分的なピンイン名を使用する場合があります。さらに、一部の依存クラスでは、「list_banner」のような名前、つまり親要素名に「_」と要素名を加えた名前を使用する場合があります。

名前については、チームデザイナーの習慣に応じて相談できます。ただし、将来の参照用にドキュメントを生成できるように、名前の後にコメントを追加することをお勧めします。

3. 継承について

CSSでは継承をうまく活用する必要があります。たとえば、2 つのネストされた div では、親要素が background-color 属性を black として定義しており、子要素の背景も black である場合は、定義を繰り返す必要はありません。 CSS 継承をうまく利用すると、コードをより効率的かつ合理化できます。

4. CSS 定義の階層について

CSS でクラスを定義する場合、ステートメントを階層的に記述することをお勧めします。

構造例:

CSS の例:

#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
オン インこの例では、最終的な効果から判断すると #menu を繰り返し表示する必要はありませんが、実際には #menu を先頭に追加できると、ドキュメントの階層がより明確になり、読みやすくなります。

5. スタイルの並べ替えについて

CSS スタイル シートを設計する場合、ほとんどの場合、コードを手作業で記述するため、クラスでのスタイルの並べ替えでは混乱が発生しやすくなります。たとえば、いくつかのクラスはパディング、マージン、背景、色、その他のスタイルを使用しますが、並べ替えの際、背景を高くするクラスもあれば、マージンを高くするクラスもあります。これにより、ある程度の混乱が生じ、簡単に思考が挫折してしまう可能性があります。個人またはチームのデザイナーが大まかな順序に同意することをお勧めします。これにより、個別には大きな違いはありませんが、全体的には読みやすく管理しやすくなり、全体の効率が大幅に向上します。

たとえば、デフォルトでは、幅、高さ、パディング、マージン、境界線などを前面に配置し、次に背景、次にテキストを制御するフォント、色、テキスト配置などを配置します。次に、リストスタイルなどの特別なタグでのみ使用できるいくつかの要素、そして最後に CSS フィルターです。特殊な状況（定義する必要がある特定の CSS プロパティの優先順位など）が発生した場合でも、柔軟に処理できます。

これが概要です。Huode は皆様の追加と修正を歓迎します。