1

I want to clarify the good practices in terms of Designer/Developer workflow.

Here is my observation, let me know if I am wrong : there is no fundamental reason why CSS and JS should use the same attributes. Events associated to an html tag are not related to the styles that are applied to it and separating them would help the maintenance for both the developers and the designers.

And my question : why isn't there a strict separation between the two? I understand that we are free to use custom attributes for JavaScript and keep IDs, classes and HTML tag names for CSS however everything in jQuery seems to be made to use them. For example :

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

etc. Why is so?

Side-question : is there some performance issues about using only custom attributes for JavaScript?

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

This article from Roy Tomeij http://roytomeij.com/2012/dont-use-class-names-to-find-HTML-elements-with-JS.html mentionned in stackoverflow : Separate ID and Class for JS and CSS seems to advice not to use classes in Javascript but that's all I have found so far and I want to expand the discussion.

It is valuable for both CSS and JavaScript to have the two items : unique IDs and multiple classes but when I think about it we could have div such as

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

and hypothetical CSS properties and jQuery functions such as

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

and in the same way

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

Thank you all! I do not intend to reinvent everything just to explore ways to improve teams' workflows.

Community
  • 1
  • 1
Tristan
  • 3,192
  • 3
  • 20
  • 32
  • Html5 approach http://toddmotto.com/data-js-selectors-enhancing-html5-development-by-separating-css-from-javascript/ – Tim Abell Jun 27 '14 at 12:25

3 Answers3

2

I think you can answer your own question. What possible benefit does having markup that looks like this provide?

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

To me it looks messy and harder to deal with. In theory, content is king, and in the beginning you have a beautifully marked-up semantic HTML document. Thoughtfully, you add semantic class names and IDs based on the content within them. Using these IDs and classes, you are able to staple design and functionality onto your document using CSS and JavaScript respectively.

To answer your other question, IDs are faster for JavaScript. If you're using JQuery, the performance is negligible if you cache the DOM references as variables (which you should always do if you reference an element more than onec). For example, var $myclass = $('.myclass'); You can read more about selector performance here.

For CSS, many people recommend avoiding IDs for styling as much as possible. You can read the spec on specificity, but basically using lots of ids will lead to some of the same (though less extreme) problems as using !important.

Community
  • 1
  • 1
bookcasey
  • 39,223
  • 13
  • 77
  • 94
  • Thanks for your answer. The markup was just an example, it could be done with better attributes. The point is JavaScript and CSS does not have to use the same attributes, don't you think? Semantic names could still be used for both JavaScript and CSS but with event-related names for JavaScript and style-related names for CSS. – Tristan Oct 15 '12 at 18:14
  • I don't see the benefit of what you're suggesting. Use `` if you don't want to use the same ids for CSS and JavaScript. – bookcasey Oct 15 '12 at 18:17
  • Exept that an html element cannot have multiple IDs http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids – Tristan Oct 15 '12 at 18:19
  • Then use classes! Or classes for CSS, and id's for JS. Then they'd be separated, if that's how you prefer to work. In addition, the HTML5 spec ["doesn't proclude"](http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute) the use of multiple ids. I'm not saying it's a best practice. – bookcasey Oct 15 '12 at 18:24
  • This would be too restrictive for both JS and CSS. IDs and classes are useful for both. The bottom point is that any modification of an id or a class from the designer will affect the developers work and vice-versa. I'm looking for a solution that solves this. – Tristan Oct 15 '12 at 18:32
1

The best I've seen is:

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

Essentially - add a class with js- prepended to it so you can distinguish from your stylistic classes and your jQuery hooks. It allows you to to create as many ID's or classes as you'd like without inhibiting your styles to be tied to actions as well.

geebru
  • 46
  • 2
0

there is no fundamental reason why CSS and JS should use the same attributes.

This is true. They're two separate languages...so, yes. There is no 'fundamental reason' why they should use the same attributes.

however everything in jQuery seems to be made to use them.

I don't think this is true, though. JQuery has specific functions for class and so on because, well, they're existing CSS attributes. But it also has the same exact functions for custom attributes, so there's no asymmetry here. I don't think this could be used as evidence that Jquery was made to use CSS attributes anymore than custom attributes.

As to your questions of performance or which to use, I think that bookcasey adequately answered them.

jamesplease
  • 12,547
  • 6
  • 47
  • 73
  • Thank you for your answer. I don't think there are jQuery functions to add, remove or check if a value exists from a custom attribute. So it does exists an asymetry there. – Tristan Oct 15 '12 at 18:16
  • True, true, not any arbitrary attribute, but the HTML5 `data` attributes have `Jquery` functions as of 1.4.3+. These can basically be considered custom attributes with a little restriction on naming. [Read about them here.](http://api.jquery.com/data/) – jamesplease Oct 15 '12 at 18:45