1

我想阐明设计人员/开发人员工作流程方面的良好实践。

这是我的观察，如果我错了，请告诉我：CSS 和 JS 应该使用相同的属性没有根本原因。与 html 标签关联的事件与应用于它的样式无关，将它们分开将有助于开发人员和设计人员的维护。

我的问题是：为什么两者之间没有严格的区分？我知道我们可以自由地为 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在 stackoverflow 中提到：JS 和 CSS 的单独 ID 和类似乎建议不要在 Javascript 中使用类，但这就是我目前发现的所有内容，我想扩大讨论范围。

对于 CSS 和 JavaScript 来说，拥有这两项是很有价值的：唯一 ID 和多个类，但是当我想到它时，我们可以拥有 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 将设计和功能装订到您的文档中。

要回答您的其他问题，JavaScript 的 ID 更快。如果您使用的是 JQuery，那么如果您将 DOM 引用缓存为变量（如果您引用一个以上的元素时应该始终这样做），则性能可以忽略不计。例如，var $myclass = $('.myclass');您可以在此处阅读有关选择器性能的更多信息。

对于 CSS，许多人建议尽可能避免使用 ID 进行样式设置。您可以阅读有关 specificity 的规范，但基本上使用大量 id 会导致一些与 using 相同（尽管不太极端）的问题!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 应该使用相同的属性没有根本原因。

这是真的。它们是两种不同的语言……所以，是的。没有“根本原因”为什么他们应该使用相同的属性。

然而，jQuery 中的一切似乎都是为了使用它们。

不过，我不认为这是真的。JQuery 具有特定的功能class，等等，因为它们是现有的CSS属性。但它对自定义属性也有相同的功能，所以这里没有不对称性。我不认为这可以用作 Jquery 使用CSS属性而不是自定义属性的证据。

至于您的性能问题或使用哪个问题，我认为 bookcasey 充分回答了这些问题。

于 2012-10-15T18:15:04.430 回答