私はメッセージボードを持っていて、私のユーザーの1人はgreasemonkeyスクリプトを書いて、ページ内のさまざまな要素を定型化しています。彼は素晴らしい仕事をしましたが、彼のスクリプトの最初のステップは、現在のページを解析し、いくつかのCSSクラスをページのほぼすべてのhtml要素に追加することです。それらのほとんどはページをスタイルするために使用されるのではなく、実際に修正するページあたりのカップル要素を簡単にクエリできるようにするためです。たとえばclass="thread_started_by_user_123 thread_with_456_posts thread_with_789_views thread_last_posted_in_by_user_12345"などHTML要素にたくさんのCSSクラスを追加
これは標準的な方法ですか？不必要なCSSクラスをたくさん追加することには、javascriptやサーバー上で、それを提供されたページにも追加する場合には、欠点があります。
これは、任意のメタデータを要素に埋め込むように見えますが、これは確かにクラス属性のために設計されたものではありません。その効果がGreasemonkeyスクリプトで始まり、終わりを迎え、クライアントにローカライズされていることを考えれば、ハックは無害だが、サーバ側で複製することは勧められない。
HTML残念なことに、無効な属性を使用する以外のメタデータに関しては、代替手段としてあまり役立たないため、既存のタグ内の「クラス」属性に意味的意味を追加する仕組みがあります。 microformats。マイクロフォーマットの周りに息をのむような流行の誇大宣伝がたくさんありますが、全体的には、all-xmlが問題にならない分野のベストプラクティスを中心に展開しています。
セマンティクスに関しては、欠点があります。要素が実際に何であるかを記述していないクラスがあり、スタイリングの目的でのみ存在する場合は、再設計および/または再構成を決定した場合、これはあなたを傷つける可能性があります。例えば
、BAD：
<div class="header red left-side">
GOOD：
<div class="header main current-event">
1：
は、ここでの例です。特定のクラスがあまりにも多すぎると、それを無効にすると悪い可能性があります（posted_in_2006は関連性がありますが、posted_at_8_30_pmはおそらく完全に無関係です）。 – You
あまりにも特定のクラスは、私が心配しているものです。私は要求で砲撃を受けたくない "あなたはこれらの要素にこのようなクラスを追加できますか？"と言っていますが、処理/レンダリング/帯域幅に関する懸念がなくてもOKです全部 – kenwarner
私は船外に出てクラスにメタデータを置くと言っているわけではありません...あなたが望むならば、あなたは要素が何であるかに関連しています（クラスはスタイルだけでなく、 jscript/jquery/etcなどに使用されています）。ただし、スタイリングのみに頼っているのであれば、それらを2つのクラス、つまりMOSTの3つにすることをお勧めします – Jason
クラスは、彼らは、マークアップのセクションの分類のためにしているだけCSSのためではありません。その分類に基づいてスタイリングを適用することは単なる1つの使用に過ぎません。したがって、クラスが他のカテゴリ化の目的に役立つなら、それはうまくいく、そして完全に良い方法です。
要素に割り当てられたクラスに関連付けられたスタイルがない場合、ブラウザは無視します。それがあなたが心配しているものなら、ページ処理時間を大幅に増やすことはありません。
しかし、要素ごとにたくさんのクラスがある場合、貴重なの帯域幅を使用し、ページ全体をロードする時間が長くなることを認識しなければなりません。この問題を回避するには、CSSを外部化してブラウザがキャッシュできるようにします。
本当に変更したい要素をクエリするのにjqueryを使用していますか？ jQueryセレクタを持つ要素を選択する方が簡単ですが、標準のJavaScriptでは不可能または不可能と思われるので、不要なクラスをすべて避けることができます。
ボトムラインでは、必要な場合に多くのクラスを使用する上で問題はありませんが、それは生産上は問題ありませんが、必要がない場合は、より良い解決策が必要ですあなたはおそらく思いつくことができます。
jqueryセレクタを使用しています。 – kenwarner
ちょうどデータポイントのために、私は昨日GMailのHTMLを見ました（そのボタンはとても素敵です）。それはそのようなものでいっぱいです。
class="goog-imageless-button goog-inline-block goog-imageless-button-collapse-left goog-imageless-button-collapse-right"
私の懸念の一つです。私は、CSSクラスがこのように使用されるという感覚は得られませんでしたが、適切な選択肢がないことを考えれば、とにかくその方法を使用することが実践になったのでしょうか。 – kenwarner