Web 開発者 (つまり、あなた) は、CSS クラスと ID 名を作成し、これらの名前を使用して Div やその他のページ要素とタグを識別できます。開発者にとって、XHTML タグ (タグ) を再定義する CSS セレクターに名前を付けるときは、事前定義されたタグと正確に一致することを確認する必要がありますが、クラスおよび ID セレクターの名前については、意見の問題です。ただし、これらのクラスや ID に好きなように名前を付けるのは良い習慣ではありません。
Andy Clarke (Stuff and Nonsense と All That Malarkey の) と Eric Meyer によって書かれた、CSS クラスと ID の命名規則に関する一連の記事を読んだ後、私は自分の Web サイト設計プロセスでのクラスと ID の使用について考え始めました。命名方法。
直感的なネーミング
Web ページをデザインし、Div を識別する必要がある場合、最も自然な考え方は、ページ上のその位置を説明する単語を使用して要素に名前を付けることです。このアプローチでは、クラス名と ID 名は次のようになります。
トップパネル
水平方向のナビゲーション
左側
中央の列
右列
これらは、CSS および XHTML のクラスと ID に名前を付ける有効な方法です。これらの用語はシンプルで説明的であるため、ページ要素とそれに対応する CSS スタイルを識別する必要性に対応します。
問題は、そのような名前がページのコンテンツの特定の表現に関連付けられていることです。これらの名前は、特定のページ レイアウト内のページ要素の位置を参照するため、そのようなレイアウト外で使用すると不適切であるか、混乱を招く可能性さえあります。同時に、これらの名前はドキュメントの内容の構造には関与しません。したがって、CSS クラスと ID に名前を付けるより良い方法を次に示します。
構造化された命名
構造化マークアップとは、表現/位置情報をコンテンツから完全に分離することを意味します。これには、マークアップに表示されるクラス名と ID 名が含まれます。
タグ付けされた関連情報は、文書の外観ではなく構造を説明するために使用されます。この機能を使用すると、CSS を変更するだけで、コンテンツとマークアップをさまざまな外観形式で再利用できます。この方法を理解すると、オーディオなどの外観形式を扱う場合、ページ位置を使用してクラスや ID に名前を付けるのは非常に不適切であることが簡単にわかります。したがって、クラスと ID は、出現する場所ではなく、ドキュメント内の目的に基づいて構造化され、名前が付けられる必要があります。
クラスと ID 名は、以下に示すように構造化された方法で名前を付けることができます。
ブランディング
メインナビ
サブナビ
メインコンテンツ
サイドバー
これらの名前は直感的な命名規則と同じくらい理解しやすいものですが、ページ要素の場所ではなくその役割を説明しています。これにより、コードは純粋な構造マークアップを使用するという本来の目的とより一貫性のあるものになります。つまり、開発者はマークアップを変更せずにさまざまなメディアの表示形式を処理できるようになります。
Web ページを他のメディアでフォーマットする予定がない場合でも、構造化された名前を使用すると、将来のサイトのアップグレードや再設計が容易になります。たとえば、構造化された名前付けにより、右列に同じ ID を持つ div がページの左側に移動された場合の混乱が回避されます。この方法で div サイドバーに名前を付けるのは、ページのどちらの側に表示されても、名前が開発者にとって直感的で理解しやすいため、より適切です。
いくつかの命名規則
アンディ・クラークは、標準化された Web デザイン概念を提唱する開発者によって設計された 40 の Web サイトのソース コードを分析しました。クラス名と ID 名は非常に一貫性がありませんが、頻繁に現れるいくつかの一般的な名前がまだ見つかります。最も一般的に使用されるクラス/ID 名のリストの例を次に示します。
ヘッダ
コンテンツ
ナビ
サイドバー
フッター
これらの共通のクラス名と ID 名は、標準の誕生を示しているのでしょうか、それとも一般的に受け入れられている規則の形成を示しているのでしょうか?私はそう願っていますが、そうではないと思います。私たちは、私たちが毎日目にする一般的なページ要素の一連の命名基準を本当に知りたいと思っています。同時に、標準化された命名方法を使用すると、特に、異なる開発者が異なるタイミングで開発したサイト間で作業を切り替える必要がある場合に、ページ要素の検索と Web サイトのアップグレードが容易になります。