2

モジュールまたはウィジェットを識別するために id 属性の代わりに css クラス名を使用することに関する興味深い投稿を読みました。クラス名が ID として使用されていることを示すために、css クラス名の前にハッシュまたはアンダースコアを付けることができます。これは、モジュールまたはウィジェットが複数回表示される可能性があるのに対し、ID は Web ページごとに 1 回しか使用できないためです。

簡単な例

次のようなIDを使用する代わりに

<div id="currencyConverter1" class="foo">EUR/USD</div>
<div id="currencyConverter2" class="foo">GB/USD</div>

プレフィックス付きのクラス名が使用されます

<div class="#currencyConverter foo">EUR/USD</div>
<div class="#currencyConverter foo">GB/USD</div>

記事では、ハッシュはエスケープする必要があるため、ハッシュの代わりにアンダースコアを使用できることを示唆しています。

私はこのアイデアがとても好きですが、これが良い習慣なのか、それとも欠点があるのか​​ はわかりません。これについての一般的な意見は何ですか？

4

3 に答える 3

0

あなたのモジュールやウィジェットが何のためにあるのか (wordpress?) はわかりませんが、私がコーディング時に使用する方法論は次のとおりです:

1: ページに 1 回しか表示されないことがわかっている特定の機能を持つ DOM 要素の場合は、ID (#main_navigation、#global_header など) を使用します。

2: DOM 要素はスタイリング目的 (CSS) に使用され、次にクラス名を使用します。クラス名は、DOM 要素が何をしているかをできるだけ説明するようにしています。.blue_text のようなあいまいな名前は使用しません (以下で説明します)。

3: ある種の情報を DOM 要素に添付する必要がありますが、これはややぎこちなく、このスキームに適合しないため、カスタム HTML データ属性を使用します。たとえば、サイトのバックエンドを作成し、ユーザーが div の背景色を選択できる場合、div に.user_selected_background_color_classクラスとして配置する代わりに、data="user_selected_color". これは一種の不十分な例ですが、ユーザーが一連の画像を選択してギャラリー モードまたはスライドショー モードにすることができるものを作成し、データ属性を使用してコンテナー div のスタイルを決定する方法を決定しました。

于 2013-07-12T12:39:07.260 に答える