Simplified CSS Preprocessing with restyle.js

| by Andy Earnshaw Follow 0 Followers on Feb 17, 2014. Estimated reading time: 2 minutes |

Andrea Giammarchi's restyle.js is a new, JavaScript-based, CSS preprocessor that can run on either the server (via Node.js) or in the browser. It touts itself as "a simplified CSS approach", generating all prefixed variations of CSS rules and properties and, if applicable, inserting them into the DOM.

There's no shortage of CSS preprocessors around, but Andrea claims there are none as lightweight that work in both the server and the client:

Before you think about "yet another CSS preprocessor", I'd like to inform you that I've asked around to few common, well known, CSS or general web developers and it looks like this little script was still missing ... once you'll realize what is this about, you'll probably wonder yourself "how come nobody has done this already?" My idea is that somebody probably did but I am not sure in 0.8KB minzipped and compatible with both server and client down to IE6 ... so here I am talking about restyle.

The library exposes a solitary method, restyle() , which accepts two arguments. The first is expected to be a JavaScript object, with a grammar familiar to both CSS and DOM style editing. For example,

    'body >': {
        backgroundColor: 'goldenrod',
        backgroundImage: 'url(mybg.png)'

This will produce the following CSS:

 body > {
    background-color: goldenrod;
    background-url: url(mybg.png);

We could also specify the JavaScript object in a different manner to achieve the same output:

    'body >': {
        background: {
            color: 'goldenrod',
            image: 'url(mybg.png)'

Of course, this is nothing special and the reduction in markup so far, if any, is tiny. But restyle.js shines brighter when you're trying something that would be a little more tedious with standard CSS, like vendor prefixes. The second argument allows you to specify the vendor prefixes that will be generated in the output, for example:

    '.my-div': {
        transition: 'background-color 500ms ease';
        backgroundColor: '#00f';
}, ['moz', 'webkit']); 

This results in the following generated CSS:

 .my-div {
    -webkit-transition: background-color 500ms ease;
    -moz-transition: background-color 500ms ease;
    transition: background-color 500ms ease;
    background-color: #00f;

This comes especially in handy when writing animation rules; a few lines of code can be transformed into many lines of vendor prefixed at-rules and CSS properties with so little effort. On the server, omitting the second argument will result in no prefixes, while restyle.js run in the browser would generate all common vendor prefixes regardless of which browser is executing the code.

The restyle() function also returns a different result depending on the environment. In a Node.js script, it returns a string containing the resulting CSS. In the browser, however, the CSS is automatically inserted into the DOM to take immediate effect, and the return value is a handy little object containing the properties node (the resulting style element), css (a string containing the generated CSS), and a single method, remove() , which can be called to immediately remove the inserted styles from the DOM.

A basic example page is available that lets you play around with restyle.js by writing your own code and generating the result. As some comments on Andrea's blog pointed out, restyle.js is based on the same idea as a similar library, the larger and more full-featured AbsurdJS. At barely one tenth of the size, though, restyle is certainly lightweight and interesting enough to be worth a look. Take a look at the readme to get started using it.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you