英語からAIを使用して翻訳されました
この文章はAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。
この記事では、HTMLおよびCSSセレクタに関するベストプラクティスを説明します
ウェブページの要素の階層
簡単におさらいすると、ウェブページは基本的に2つのコンポーネントに分かれています：<head>と<body>。<head>には、ページに読み込まれるスクリプト、スタイル、およびその他のメタデータ要素に関する情報が含まれています。<body>は、ページのすべてのHTMLコンテンツがレンダリングされる場所ですが、スクリプトやスタイリングも含むことができます。
CSSセレクタとは
CSSセレクタは以下で構成されています：
- タグ：HTMLページ上の要素の階層を定義します
- 属性：ウェブページ上の要素にルールを適用する値Data-Attributes：標準要素に追加の属性情報を保存します
- ID：特定の要素に絶対にユニークな名前を付けるために使用されます
- クラス：同じスタイルを持つことを意図したすべてのページ要素に追加の名前を付けるために使用されます
CSSセレクタ：タグ
タグはHTMLページ上の要素の階層を定義します。
<div>、<a>、<button>、<span>など。
CSSセレクタ：属性
属性はウェブページ上の要素にルールを適用する値です。例：画像の幅と高さ。属性は常に開始タグに指定され、通常はname="value"のような名前/値のペアで構成されます。
CSSセレクタ：データ属性
Data-Attributesは、他の非標準属性やDOM上の追加プロパティを必要とせずに、標準要素に追加の属性情報を保存します。イベントを作成する際は、データ属性に角括弧を使用します。
CSSセレクタ：ID
ID属性は特定の要素にユニークな名前を付けるために使用できます。ページ上の特定のIDを持つ要素は1つだけであるべきです。ユニークな値の前に「#」で識別されます。
例： “#UniqueIDValue”
CSSセレクタ：クラス
クラスは、同じスタイルを持つことを意図したすべてのページ要素に追加の名前を付けるために使用されます。
CSSセレクタの一部としてクラスを使用して、ページ上の正しい要素に一致させます。
値の前に「.」を付けて表現されます。つまり、「.ClassValue」です。
CSSセレクタのベストプラクティス
セレクタは、必要なだけ具体的であれば十分です。セレクタを意図したよりも広くしない限り、何かを省略しても構いません。
同じセレクタを書く方法はたくさんあります。以下のHTMLに対して、次のセレクタはすべて同じ意味を持ちます：
span b.blue
span .blue
#firstTag .blue
#firstTag b.blue
.blue
b.blue
.red .blue
.red b.blue
span#firstTag.red b.blueセレクタの各要素は：
- スペースで区切られています。
- タグが存在する場合、それはセレクタの各部分の最初のものであるべきです。
- その後、IDが存在し使用されている場合、それはタグの直後に続くか、タグが存在しない場合は最初であるべきです。
- 最後に、クラスまたはクラスは、タグまたはIDの後に来るべきであり、単一の要素に複数のクラスが存在することができます。
クリックイベントを作成するためのベストプラクティス
- 主要機能の要素にユニークなIDまたはクラスがあることを確認してください。
- ID、クラス、または属性があまりにも特定的または一般的でないことを確認してください。
- ボタンが複数の場所に表示される場合、階層やURLの中でどの特定のボタンであるかを識別する何かがあることを確認してください。
「Change on」と「Submit」イベントを作成するためのベストプラクティス
可能な限り、提出前にフォームを検証して、提出数の膨張を防ぎます。
ページビューを定義するためのベストプラクティス
正確性のために、パスまたはハッシュに基づいてページビューイベントを作成することをお勧めしますが、ページビューURL（ドメイン、パス、クエリ、ハッシュ）によって提供される4つのプロパティのいずれかを使用して作成することもできます。
考慮事項
1. 動的CSSは、サイトが更新されるたびに変わるランダムな数字や文字列を含みます。そのため、サイトとID/クラスの値が変わると、データフローが停止したり、開始されなかったりします。
2. Reactはしばしば予測不可能なクラス名を生成します。