[CSS] クラスと ID の命名規則_html/css_WEB-ITnose

説明、この記事の内容は書籍「高トラフィック ウェブサイト CSS 開発テクノロジー」の研究概要です、テキストは書籍からのものです

この本は良いです、読んで勉強することをお勧めします

あなたオンライン ブログ投稿も参照できます

原著: Bin Go
リンク: http://blog.bingo929.com/css-coding-semantic-naming.html

接続を確立するためにクラスと ID が使用されますCSS と HTML ファイルの間の変換

一部のセレクターの記述はブラウザの互換性の問題を考慮する必要があることに注意してください。たとえば、n 番目の子セレクター、マルチクラス セレクター .classA.classB (IE6 および以前のバージョンは理解できません)

要素についてクラスと ID の名前付けについては、次の点に注意してください:

セマンティクス

使用可能な文字

規約

一貫性

1. まず、セマンティクスについて話しましょう

いわゆるセマンティクスとは、名前が例は次のとおりです

♦パフォーマンス タイプ (推奨されません)

PurpleBold (紫色の太字)

BigHeading (大きなタイトル)

top-left-box (左上のボックス)

boxLeft(左ボックス)

red(赤)

赤いマークは要素の表現形式を含みますが、変更されると表現形式が変わるため、名前付けでは許可されません。 CSS のクラス名や ID 名を変更するだけでなく、対応する HTML 要素のクラス名や ID 名を変更する必要があるため、大規模な Web サイトを編集する場合、これらを複数作成するのは非常に手間がかかります。修正。したがって、ネーミングは可能な限り変化に応じたものを採用する必要があり、ネーミングは内容と密接に関係しています。

♦Semantic (提唱)

sidebar (サイドバー)

warning (警告)

もちろん、場合によっては、表現を適切に使用して名前を付ける方が柔軟になる場合もあります。たとえば、枠線付きの表示名を使用して、Web サイト上の複数の場所に同じスタイルを追加します。

最良の解決策は、最もクリーンな解決策でも、最も美しい解決策でもないことを覚えておいてください。ルールに固執するのではなく、自分のアイデアをオープンにする方が良いのです。

2. 使用できる文字

最良のルール: 常に文字、数字、またはハイフンを使用し、常に文字で始める

クラス名と ID 名は大文字と小文字が区別されることに注意してください。

アンダースコアを使用したり、数字やハイフンで始めたりしないでください。「*」、「/」、「」は使用できません。新しいブラウザでは、一般的ではない文字セットのサポートが強化されていますが、これはすべてのブラウザに当てはまるわけではありません。互換性を確保するには、最適なルールに従ってください。

3. 規約

規約で一般的に知られているいくつかの規約名を使用すると、コードの予測可能性が向上し、自分自身や他のユーザーが理解しやすくなり、スクリーン リーダーやアナライザーの動作にも役立ち、SEO (検索エンジンの最適化) が向上します。 )

規約は、Web フロントエンド開発仕様マニュアルを参照します

4. 大文字と小文字

キャメルケース (短縮語の各文字は同じ大文字を使用します: pdfLink linkPDF)

ハイフン

5. 名前付けスペース

に接頭辞を追加します (例: wp-users)。名前空間を使用するには、チーム内で名前空間の規則を開発する必要があります。

これは防御的 CSS で使用される手法の 1 つで、名前空間を通じてコードを分離して競合を回避し、元のコードや将来のコードに影響を与えないようにします。

その後の段階の学習:

Microformat (microformat) http://microformats.org/