Classtweak - Terse DOM Element Class Modification

Between the progress of various HTML5 specifications (the Selectors API for instance) and awesome little libraries like Eve I'm starting to see less and less need for jQuery.

I've loved jQuery for a long time, but it is starting to get heavier and heavier as time goes on. This is completely understandable given the broad browser compatibility that is required of it, but when you start to realise you don't actually need all that weight, then you start looking around for smaller component pieces to help solve the problem.

Classtweak is a little experimental JS library that provides an alternative to jQuery (and Zepto) addClass, removeClass and toggleClass functions.

I'm actually really pleased with the result as it feels really light to use. For example, let's say you had a HTML element that you wanted to add a particular class to (and didn't want to clobber the current classes in the elements className property). If you weren't going to use jQuery, then you would have to slice and dice the current classes attached to the elements, and if your new class didn't exist then add it.

This is what classtweak is designed to do, e.g.

// get the element using old school, getElementById
var element = document.getElementById('test');
 
// add the bounce class to the element
classtweak(element, '+bounce');

In the above case, through a call to getElementById we retrieved an element from the DOM. We then used classtweak to add the class bounce to the element. As classtweak has been written to work in conjuction with newer HTML APIs, you can also ask classtweak to make use of the Selectors API for you:

// add the bounce class to the test element
classtweak('#test', '+bounce');

This is exactly the same as the first example, but where classtweak uses the document.querySelector function to locate the element. In actual fact, classtweak is making use of the querySelectorAll function which returns all matching elements so if you wanted to modify all divs on a page you could do the following:

// add the bounce class to the element
classtweak('div', '+bounce');

For the most part, anything you could do with a jQuery selector you can also do using the new Selectors API so it's well worth having a play.

Class Modifier String

The class modifier string (specified in the second parameter) is designed to let you add/remove/toggle mutiple classes of the specified elements in a single call:

// add the bounce class, and remove the slide class
classtweak('div', '+bounce -slide');
 
// toggle the bounce class on the even divs
classtweak('div:nth-child(even)', '!bounce');

An alternative syntax is also currently supported, but I'm not sure if it will stick around:

// add the bounce class, and remove the slide class
classtweak('div', '.bounce slide.');
 
// toggle the bounce class on the even divs
classtweak('div:nth-child(even)', '.bounce.');

A few conveniences

In addition to the core functionality, I've dropped in a few conveniences into classtweak. For instance, if you don't provide a class modifier string (2nd parameter) then classtweak will return you a tweaker function that you can use to modifier classes on the elements that were specified / located in the first parameter:

// get a tweaker that is bound to the divs on the page
var tweaker = classtweak('div');
 
// add the bounce class to the divs
tweaker('+bounce');
 
// toggle the slide class
tweaker('!slide');

I've also added chaining so you can do a whole pile of tweaking all at once:

// deactivate all the sections on the page and then activate the 
// 'home' section
classtweak
  ('section', '-active')
  ('section[data-route="/"]', '+active');

It's important to note that the function that is returned for chaining depends on the way class tweak is called. Basically, if you provide a class modifier string (2nd parameter) you can reselect and tweak again as per above. If you do not provide a modifier string, then a tweaker function is returned which can also be tweaked:

// get a tweaker that is bound to the divs on the page
var tweaker = classtweak('div');
 
// add the bounce class to the divs, and toggle the slide
tweaker('+bounce')('!slide');

Feedback, Suggestions?

If you have any feedback or suggestions, then it would be great to hear them. Particularly interested to know what people's thoughts around around the different modifier string syntaxes as it would be great just to support one for both library size and keeping things simple reasons...