Decouple JavaScript classes from CSS ones by using prefix
By using js- prefix for classes in DOM elements you decouple functional aspects of these elements from CSS ones. An example:
<a class="btn js-popup">Click me!</a>Now:
- as css coder, you can easily change anchor design by changing
btnclass and not worry it'll break pop up behavior. - and conversely, as JavaScript developer you can remove popup behavior and never break any existing CSS rules.
See also: Avoid tag selectors for common elements
Written by Adam Stankiewicz
Related protips
8 Responses
That's actually a very nice tip! Thanks for sharing!
https://github.com/kossnocorp/role
check this
almost same but with specific selectors
quick and easy. thanks
It would be neater to keep classes for styling and using another attribute for JS:
<a class="btn" data-hook="popup">Click Me</a>
But $('[data-hook="popup"]') is pretty ugly and long-winded so I guess we're stuck with classes for now. :(
Good tip though, I often end up coupling styling and JS and then breaking stuff when I change styling at a later date.
i've discussed a similar technique in a blog post here: http://tech.pro/tutorial/1104/how-to-write-maintainable-jquery-applications
essentially the same, except I simply prefix with a "-" instead of "js-". slightly cleaner but perhaps less explicit.
wow what a great idea
This is a terrible, horrible, awful idea, because it flies straight in the face of semantic HTML. In the HTML/CSS/JS ecosystem, behavior and appearance are both part of the nature of an object. It is perfectly reasonable to say "this DOM object represents a book title. Display it with italic text and a gray background, and when it is hovered over, pop up an image of the book cover". There is no reason to divide this information between classes book and js-book; rather, both the CSS and the JS should refer to class book. That way, the markup can just have the one book class and not have to know anything about whether it's dispatching to CSS, JS or neither.
A worse side effect of the js- prefix is that it prevents "happy collisions", where a class name meant for one domain becomes useful in another. Let's continue the previous example. Suppose that, differently from what I stated above, <div class='book'> only displayed the italics on the gray background (that is, it was only used for CSS). Along comes the JS developer, and knows that he wants to add the cover popup to every item of class book. He should just be able to write something like $('.book').on('mouseover', addPopup), thus making what was previously a CSS-only class useful for behavior. However, the practice of putting js- on classes meant for JS would mean that an extra -- and completely redundant -- class would have to be added to all book items. This benefits nothing, and should be avoided.
If you think you need js- on your classes, you're probably not testing enough.
If existing code has an attached js behavior on id element - should I create a new prefix class and attach the behavior to it?
Eg.
<a id="modal">Click me!</a>
Would be
<a id="modal" class="js-id-modal">Click me!</a>
