2017-06-29 7 views
3

スタイリングに使用されるものとJSイベントのものとの間で区別できるようにCSSクラスに名前を付ける賢い方法はありますか?スタイリングとイベントのCSSクラスの命名規則は何ですか?

CSSクラスが4つあるdivを見ると、デバッグ時間を短縮するために、クラスがスタイリングだけに使用されているのか、デザインのみに使用されているのか分かります。

私はすべてのCSSスタイルのクラスにプレフィックスとしてstyle_を付けることができますが、もっと良い方法はありますか?

+0

だから、JavaScriptを特定していないjQueryの説明として

$('body').on('click', "[data-event='changeBackground']", function() { $("[data-event='changeBackground']").css('background-color', 'red'); }) 

パフォーマンスが非常に良いですか? – Gezzasa

+0

私はあなたがjQueryではなくjavascriptでタグ付けされていることを意味します。私は解決策を持っていますが、jQueryだけです。 – Gezzasa

+0

jQueryも使用しています。私はあなたのソリューションを聞いてみたい。 – radbyx

答えて

6

JSイベントに使用されるすべてのクラスの初めに "js-"を使用してください。

+0

私はそれが好きです。それは私の 'style_'よりも短く、私は2番目の部分(JS)を変更して、スタイリングクラスを手つかずのままにします。それはおそらく直感的なバインディングも強くしています。 – radbyx

+0

私たちはまた、そのjs表記を使用します。時には、JS目的のためにデータ属性を使用しようとする場合もあります –

3

jQuery(js解決法はわかりません)では、データ型を使用でき、VIAクラスまたはIDの選択を忘れてしまいます。

https://jsfiddle.net/tcfhdfth/1/

<div data-event="changeBackground"><h1>hello</h1></div> 

$("[data-event='changeBackground']").css('background-color', 'red'); 

あなたは、データ・イベント、それを呼び出す必要はありません。あなたはそれをあなたが好きなものと呼ぶことができます。予約語ではありません。

リスナーを作成するには、次の操作を行います。ここjQuery select by class VS select by attribute

+0

これはどうやって書くのですか? "$( 'body')。on( 'click'、 '.deleteGrps'、function(){} '。 DOM内に作成されますか? – radbyx

+1

意味deleteGrpsはあなたが選択しているクラスですか? – Gezzasa

+1

https://jsfiddle.net/tcfhdfth/2/フィドルのケースでは、h1のみが使用され、h1を囲んでいます。 .click the h1 xD – Gezzasa

関連する問題