多くのCSSクラスをHTML要素に追加する

Question

メッセージボードがあり、ユーザーの1人が、ページ内のさまざまな要素を様式化するために、greasemonkeyスクリプトを作成しました。彼はすばらしい仕事をしましたが、仕事を楽にするために、スクリプトの最初のステップは現在のページを解析し、ページ上のほとんどすべてのhtml要素にいくつかのcssクラスを追加することです。それらのほとんどはページのスタイル設定にはまったく使用されませんが、実際に変更するページごとにいくつかの要素を簡単に照会できるようにします。たとえば、 class =＆quot; thread_started_by_user_123 thread_with_456_posts thread_with_789_views thread_last_posted_in_by_user_12345＆quot; など

これは標準的なプラクティスですか？提供されたページにも追加する場合、JavaScriptまたはサーバー上に多くの不要なcssクラスを追加することには欠点があります。

Answer 1

これは、クラスを使用して任意のメタデータを要素に埋め込むように見えますが、これは確かにクラス属性が設計されたものではありません。その効果の始まりと終わりがグリースモンキースクリプトであり、したがってクライアントにローカライズされていることを考えると、無害なハックのようですが、サーバー側で複製することはお勧めできません。

HTMLは、残念なことに、無効な属性を保持する以外のメタデータに関しては、代替手段をあまり提供していません。そのため、「クラス」に意味的な意味を追加するメカニズムがあります。既存のタグ内の属性、つまり microformats 。 microformatsについては息をのむような流行語がたくさんありますが、全体的にはall-xmlへの移行が問題にならない分野のベストプラクティスを中心に展開しています。

Answer 2

セマンティクスの面では、はい、欠点があります。要素が実際に何であるかを説明していないクラスがあり、スタイリングのみを目的としている場合、再設計および/または再構築を決定した場合、これは道を損なう可能性があります。

たとえば、悪い：

<div class="header red left-side">

良い：

<div class="header main current-event">

Answer 3

要素に割り当てられたクラスに関連付けられたスタイルがない場合、ブラウザはそれを無視すると信じています。したがって、それがあなたが心配しているのであれば、それはあなたのページ処理時間をあまり増加させません。

ただし、各要素に多数のクラスがある場合は、貴重な帯域幅を使用し、ページ全体をそのようにロードするのにかかる時間が長くなることに注意する必要があります。ブラウザがキャッシュできるようにCSSを外部化することで、この問題を回避できます。

jqueryを使用して、本当に変更する要素を照会していますか？標準のJavaScriptでは困難または不可能と思われるjqueryセレクターを使用してこれらの要素を選択する方が簡単であるため、これらの余分なクラスをすべて回避できる可能性があります。

一番下の行では、必要な場合に多くのクラスを使用しても問題はありません。これは本番環境ではまったく問題ありませんが、必要がない場合は、あなたの場合のように、より良い解決策が必要です思いつくかもしれません。

Answer 4

データポイントだけのために、昨日GMailのHTMLを調べました（ボタンは非常に優れています）。

例を次に示します。

class="goog-imageless-button goog-inline-block goog-imageless-button-collapse-left goog-imageless-button-collapse-right"

Answer 5

クラスはCSSだけでなく、マークアップのセクションを分類するためのものです。その分類に基づいてスタイルを適用することは、1つの使用法にすぎません。そのため、クラスが他の分類目的に役立つ場合、それは問題なく、完全に優れた実践です。