CSSコメント、ネーミング、継承、スタイル順序など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 でクラスを定義する場合、ステートメントを階層的に記述することをお勧めします。
構造例:

ソース コード例 [www.52css.com]

CSS の例:

ソース コードの例 [www.52css.com]
#menu { ... }
#menu .menulist { ... }
#menu 。 menulist .selectit { ... }
上記の例では、最終的な効果から、#menu を繰り返し表示する必要はありませんが、実際には、#menu を先頭に追加できればドキュメントが作成されます。階層が明確になり、読みやすくなります。

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

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

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