CSSクラスをデコレーターとして使用する-良いパターン？

私はかなり複雑なGUIを備えたWebアプリを構築してきました-多くの小さな要素を並べて、さまざまな動作（ドラッグ、クリック、ただし状況依存）を必要とする他の要素内に。

私のコードは次のように機能する傾向があります：

コントロールはhtmlタグとして始まります

<li>

次に、クラスをタグに追加します

<li class = 'static passive included'>

一部のクラスは、CSSスタイリングが外観に影響を与えるためのものである可能性があります

.static {background: blue; float: left;}

他の人は、jQueryに基づいて、関連するDOMイベントの動作を提供します

$("#container").delegate(".passive", function {onclick : //do-stuff})

そして、他のものは、ドキュメントをスキャンするとき、通常のJavaScriptによって拾われるかもしれません 'included'クラスを持つすべてのノードのテキスト値を収集します。したがって、特定のDOM要素は、cssとjQueryの組み合わせによって定義されたクラスを実装するGUIオブジェクトです。

私の質問は、これは良い方法ですか？そして、これらは本当に「装飾者」でもあります-彼らは確かに「動的にオブジェクトに追加の責任を追加します」が、私はその用語についてはわかりません。最後に、このパターンを自分のサイトで使用していますか？

私はあなたがしていることが死んでいると思います。属性名を作成するのではなく、クラスを使用する利点は、ページを検証できることです。未定義のCSSクラスに不満を感じる最新のブラウザーはなく、jQueryなどで使用するのは簡単です。

クラスは問題ありませんが、HTMLデータ属性も検討します。多くの場合、クラス名は、適切なJavaScriptフッキングを有効にするのに十分な情報を伝えません（要素ID名をハードコーディングしないと）。HTMLデータ属性は、要素を分類および選択し、JavaScriptベースの拡張などの補助的な目的でデータを要素に添付する別の方法を提供します。

jQueryを使用すると、HTMLデータ属性はCSSクラスと同じくらい簡単に使用できます。

うーん...はい、いいえ。そのようなことをすることは問題ありませんが、クラスは実際にはクラス内のデータについて何が一般的であるかを示すために名前を付けられるべきです。2つのタグの間に共通点がない場合は、クラスの要件が後で分岐する可能性が高くなります。

要件の例：

• すべてのナビゲーションアイテムは、白、青、ヘルベチカに1pxのマージンで配置されます
• すべてのコメントの説明は、白地に青、arialはマージンが4px、パディングが2pxになります

両方にホワイトオンブルーのクラスを与える方が良いですか？

.whiteonblue {
  font-color: white;
  background-color: blue;
}

または繰り返しコードを持っている

.navitems {
  font-color: white;
  background-color: blue;
// more css
}

.commentdesc {
  font-color: white;
  background-color: blue;
// more css
}

私は後者を主張します。navitemsとcommentdescsの間には関係がないため、一方が変更されても、もう一方は変更されない可能性があります。その時点でCSSに移動する前に、正しいクラスのhtmlを検索し、クラスを削除し、新しいクラス（whiteonred）を追加する必要がありますか？私はしません。

同様にJavascript。おそらく、最初のデザインで同じonclickが必要になるかもしれませんが、一方が変更されても、もう一方は変更されない可能性があります。言うのは簡単です

$(".navitems, .commentdesc")

このポリシーに固執する場合、質問がすぐに消えてしまうことに気付くと思いますが、そうでない場合は、あなたがしていることは問題ありません。