1

デザイナー/開発者のワークフローの観点から、グッド プラクティスを明確にしたいと思います。

CSS と JS が同じ属性を使用する必要がある根本的な理由はありません。html タグに関連付けられたイベントは、それに適用されるスタイルとは関係がないため、それらを分離すると、開発者とデザイナーの両方のメンテナンスに役立ちます。

そして私の質問: 2 つの間に厳密な分離がないのはなぜですか? JavaScript のカスタム属性を自由に使用でき、CSS の ID、クラス、および HTML タグ名を保持できることは理解していますが、jQuery のすべてがそれらを使用するように作られているようです。例えば ​​：

$("#myid").html("Test");
$("#myid").addClass("clickable");
$("#myid").removeClass("clickable");
if($("#myid").hasClass("clickable")) var clickable = true;

など なぜそうですか？

補足質問: JavaScript のカスタム属性のみを使用する場合、パフォーマンスの問題はありますか?

$('[event="clickable"]').html("Test");

スタックオーバーフローで言及されているRoy Tomeij http://roytomeij.com/2012/dont-use-class-names-to-find-HTML-elements-with-JS.htmlのこの記事：JSとCSSのIDとクラスを分離しているようですJavascript でクラスを使用しないようにというアドバイスですが、これまでに見つけたのはこれだけです。議論を広げたいと思います。

一意の ID と複数のクラスという 2 つの項目を持つことは、CSS と JavaScript の両方にとって価値がありますが、考えてみると、次のような div を持つことができます。

 <div css_id="mydiv" css_class="green" js_id="unique_element" js_class="other_event">

および架空の CSS プロパティと jQuery 関数 (次のようなもの)

div#mydiv{margin_top:20px;} //reads from css_id attributes
div.green{color:green;} //reads from css_class attributes

$("#unique_element").click(function(){alert("Clicked!")}) //reads from js_id attributes
$(".other_event").click(function(){alert("Congratulations!")}) //reads from js_class attributes

そして同じように

$("#unique_element").addClass("clickable2"); //add a value to the js_class attribute

皆さん、ありがとうございました！チームのワークフローを改善する方法を模索するためだけに、すべてを再発明するつもりはありません。

4

3 に答える 3

2

あなた自身の質問に答えることができると思います。このようなマークアップを使用すると、どのような利点が得られるでしょうか?

 <div css_id="mydiv" css_class="green" js_id="unique_element" js_class="other_event">

私には、面倒で扱いにくいように見えます。理論的には、コンテンツが王様であり、最初は美しくマークアップされたセマンティック HTML ドキュメントを持っています。慎重に、内容に基づいてセマンティック クラス名と ID を追加します。これらの ID とクラスを使用すると、CSS と JavaScript をそれぞれ使用して、デザインと機能をドキュメントに固定することができます。

他の質問に答えるために、ID は JavaScript の方が高速です。JQuery を使用している場合、DOM 参照を変数としてキャッシュすると、パフォーマンスは無視できます (1 つの要素を複数回参照する場合は常にこれを行う必要があります)。たとえば、セレクターのパフォーマンスvar $myclass = $('.myclass');について詳しくは、こちらをご覧ください。

CSS については、多くの人がスタイル設定用の ID をできるだけ避けることを推奨しています。特異性に関する仕様を読むことができますが、基本的に多くの id を使用すると、 を使用した場合と同じ (それほど極端ではありませんが) 問題が発生し!importantます。

于 2012-10-15T18:06:49.000 に答える
1

私が見た中で最高のものは次のとおりです。

<div class="button button-primary js-modal-popup">

本質的にjs-は、文体クラスや jQuery フックと区別できるように、先頭に を付けてクラスを追加します。スタイルをアクションに関連付けることを禁止することなく、必要な数の ID またはクラスを作成できます。

于 2012-10-15T18:46:04.883 に答える
0

CSSとJSが同じ属性を使用する必要がある基本的な理由はありません。

これは本当です。それらは2つの別々の言語です...そうです。同じ属性を使用する必要がある「根本的な理由」はありません。

ただし、jQueryのすべてがそれらを使用するように作られているようです。

しかし、これは真実ではないと思います。JQueryには、などの特定の関数がclassあります。これは、それらが既存のCSS属性であるためです。ただし、カスタム属性とまったく同じ機能を備えているため、ここでは非対称性はありません。CSSこれは、Jqueryがカスタム属性以外の属性を使用するように作成されたという証拠として使用できるとは思いません。

パフォーマンスやどちらを使うかという質問については、bookcaseyが適切に答えたと思います。

于 2012-10-15T18:15:04.430 に答える