CSSのIDセレクターの命名規則は何ですか

今回は、CSS の ID セレクター の命名規則と、CSS で ID セレクター に名前を付ける際の 注意事項

について、いくつかの一般的な科学を紹介します。以下にその概要を示します。

大文字と小文字が区別されます

は [a-zA-Z0-9]、-、のみを含めることができ、-、0-9 で始めることはできません

CSS の命名仕様では、名前を数字で始めることはできず、Start のみを使用します文字、ハイフン、またはアンダースコアを使用します。その後に文字、ハイフン、アンダースコア、または数字を続けることができます。

同時に、HTML4.01 以前のバージョンでは厳密ではありませんが、XHTML では CSS での名前付けは大文字と小文字が区別されることに注意してください。

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

いわゆるセマンティクスとは、名前がパフォーマンスではなく内容を説明する必要があることを意味します。例は次のとおりです

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

PurpleBold (紫色の太字)。

BigHeading (大きなタイトル)

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

underlined-and-green (緑の下線)

boxLeft (左ボックス)

red (赤)

赤色はパフォーマンスを示しますForm に関係する要素。これは名前付けでは許可されません。変更が発生すると、CSS のクラス名と ID 名だけでなく、対応する HTML 要素のクラス名と ID 名も変更する必要があるからです。必要に応じて変更する必要があり、これは非常に面倒です。私は大規模な Web サイトを編集しているのですが、そのような変更を複数行うのは非常に時間がかかり、頭の痛い作業です。したがって、ネーミングは可能な限り変化に応じたものを採用する必要があり、ネーミングは内容と密接に関係しています。

♦セマンティック (推奨)

サイドバー (サイドバー)

警告 (警告)

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

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

2. 使用できる文字

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

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

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

3. 規約

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

規約は、Webフロントエンド開発仕様マニュアルを参照してください

4. 大文字

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

ハイフン

5. 名前空間

wp-users などのプレフィックスを追加します。名前空間を使用するには、チーム内で名前空間の規則を開発する必要があります。

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Webページで画像形式を選択する方法

モバイルレイアウトにおける流動的なレイアウトの原理とは何ですか

要素を水平方向と垂直方向に中央揃えにする不人気な方法

html +Css 垂直方向中央揃えコンテナ

js で比較演算子を科学的に使用する方法

🎜

以上がCSSのIDセレクターの命名規則は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。