qktuzw
Last Updated: January 11, 2017
·
6.789K
· sheerun
Photo on 08.01.2013 at 04.15

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 btn class 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

Say Thanks
Respond

8 Responses
Add your response

172
04b056e843c7f0e4c7e97e36174e43b4

That's actually a very nice tip! Thanks for sharing!

over 1 year ago ·
174
Db600aa753575ecc15d0a857e7e3a121

https://github.com/kossnocorp/role
check this
almost same but with specific selectors

over 1 year ago ·
5261

quick and easy. thanks

over 1 year ago ·
5266

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.

over 1 year ago ·
5297

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.

over 1 year ago ·
13086
Ec61d4d2928411e280a722000aaa08b2 7

wow what a great idea

over 1 year ago ·
18161
Dd2d775dea75b381edb1bbf0600a0907

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.

over 1 year ago ·
28483

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>

5 months ago ·