Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Ben Anggoro
Ben Anggoro
36,161 Points

Classie.JS

Hello Everyone,

I'm wondering has anyone had experience using classie.js by David DeSandro? I found it very handy. So handy and easy that it's kinda hard for me to believe of its 'bulletproof'-ness.

For example to make off-canvas or to hide/unhide etc. Codrops use it all the time as well.

Has anyone ever had experience problems with it? Such as with cross browser, etc.

Any advice or knowledge sharing is very much appreciated

Thanks!

2 Answers

First of all, I've never used classie.js, so I can't help you with any practical experience.

But I've looked at the code of the library and it seems sound.

Right now, there are two ways to manipulate classes in JavaScript. The old, somewhat messy, way is element.className. It returns a string with all the classes an element has. The classes are space-separated, so any class manipulation is basically string manipulation. You can match them through regular expression to test the presence of a class, you can add them and remove them by appending or replacing the classes in the string. This works in pretty much any old browser.

The new way of manipulating element classes is element.classList. It's fairly well supported (80.33% of the currently used browsers), and it's really becoming the best way to manipulate classes. You have access to methods that add, remove, toggle and check for the existence of classes.

Classie.js covers both of these ways. It tests for the second, newer method and uses it if it's available. If not, it does it the old fashioned way, manipulating the className string. It has all the checks you'd expect from such a library.

For instance, jQuery (based on the code in the master branch of their GitHub repo) still uses only the first (old) way of manipulating classes. Apart from some extra internal checks and ability to add several classes to an element at once, classie.js does what jQuery does.

When it comes to cross-browser compatibility, it should work in pretty much anything. Any problems that might arise would be a result of bad usage. I think you should feel pretty safe using it.

Ben Anggoro
Ben Anggoro
36,161 Points

Hi Dino! :)

Thanks for explaining all this. Happy to have someone explaining this because I really like classie. it just makes everything really simple. It's like the 'more mere-mortals-friendly way of doing it, I suppose. :)

Thanks again!

I'm happy to help. Soon enough, it'll be safe to skip classie.js completely and just use element.classList. It might be even safe to do so now, depending on what browsers you need to support.