JSマークアップのCSSクラスを使用していますか？

Question

シナリオ：PHPとテンプレートエンジンで生成され

• ホームページ。
• ページが再設計されています。
• 新しいデザインはjQuery UIに基づいています。
• 現在のCMSは、複数のテンプレートを使用していますなど

ページテンプレート、記事の詳細テンプレート、コメントのテンプレートを問題：（記事の詳細テンプレートなど） 一部のテンプレートべきHTMLフラグメントを生成しますタブのようなjQuery UI要素を使用します。現在、ページテンプレートのデータソースには、ドキュメントヘッドのメインjQuery呼び出しでjQuery UI要素に変換する必要がある情報は含まれていません。

解決策 サブテンプレートのHTMLマークアップに「jqTabs」のようなCSSクラスを追加し、メインのjQueryのスクリプトでセレクタ.jqTabsを使用しています。

質問 これは悪い考えですか？

BTW：ではなく、のオプション（締め切り、予算、...名前は-.-）ですので、「別のCMSを使用する」は有効な回答ではありません。

Answer 1

全く悪い考えではありません。

これは、クラスの主な用途の1つです。

クラス（likeとID）は、要素のスタイルを設定する方法とスクリプトのフックの両方として使用できます。

この場合は、可能な限り最良の解決策である可能性があります。これは、幅広い再設計に対してマークアップの変更を最小限に抑えることができるためです。

それは簡単に可逆です。

Answer 2

JavaScriptのフックとしてCSSクラスを使用することは、実際には悪い習慣になると私は信じています。私がこれを言うのは、このアプローチがあなたのCSSとJavaScriptを混乱させ、しばしば不必要な混乱を招くことがあるからです。

教えてください：私は現在、CSSのプロパティ（ページ幅、フォントサイズ、色など）を制御するために動的なユーザー制御の管理設定を使用する既存のシステムに新しいテンプレートを追加しようとしています。これらの設定は、JSプロパティ（スライドショーオプション、スライド間の遅延など）にも影響します。

問題は、非常に多くのCSSクラスがJavaScriptフックとして使用されていたため、スタイルに使用されるクラスとJSフックとして使用されるクラス、両方に使用されるクラスを決定するのは非常に困難です。その結果、新しいテンプレートを作成するときに、CSSとJSの両方の機能にさまざまな重要なクラスを残してしまうので、新しいマークアップで最初から始めるのは非常に難しいでしょう。

CSSクラスがスタイリングにのみ使用され、他のJSフックがJSにのみ使用されていれば、タスクはずっと簡単になります。JavaScriptのフックとCSSスタイリングのためのクラス属性の属性、我々はすべてのクラスが専用であることを確認することができますHTML5のデータを使用することにより

<a href="#" class="button" data-lightbox="true" data-slide-delay="250">my link</a> 

：私は、これは次のようになりHTML5のデータ属性、で達成されている思い描きますCSSに関連し、JavaScript関連のものはすべてそのカスタム属性を取得するだけです。

私が使用したもう1つのオプションは、JavaScriptでこれまで参照されていたjs-のCSSクラスのプレフィックスです。そうすれば、スタイリングのために安全に削除できるクラスと、既存の機能のために残さなければならないクラスを知ることができます。

<a href="/mylink" class="my-style-class my-other-style-class js-my-hook-1 js-myhook-2"> 
    My link 
</a>