Experience sharing: Simplifying CSS preprocessing with Restyle.js

Andrea Giammarchi's restyle.js is a new, JavaScript-based CSS preprocessor that can run on the server (via node. js) or in the browser. It claims to be a "simplified CSS method" that generates all the prefix changes for CSS rules and properties and, if appropriate, automatically inserts them into the DOM.

There is little to be said about the CSS preprocessor, but Andrea says there is no lightweight preprocessor available for both the server and the client:

Before you think of "another CSS preprocessor," I would like to tell you that I have asked around some common, well-known CSS or common Web developers, and there seems to be no such small script ... Once you get to know it, you might think, "How come nobody did this before?" "My idea is that maybe people have done it, but I'm not sure it can be as small as 0.8KB and also compatible with clients like server and even IE 6 ... So what we're talking about is restyle.

The library exposes a separate method, Restyle (), which has two parameters. The first parameter is a JavaScript object whose syntax is close to CSS and Dom style editing. Examples are as follows:

?

1 2 3 4 5 6

restyle({     ‘body > div.my-div‘: {         backgroundColor: ‘goldenrod‘,         backgroundImage: ‘url(mybg.png)‘     } });

It will generate the following CSS:

?

1 2 3 4

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

We can also specify JavaScript objects in different ways to achieve the same result:

?

1 2 3 4 5 6 7 8

restyle({     ‘body > div.my-div‘: {         background: {             color: ‘goldenrod‘,             image: ‘url(mybg.png)‘         }     } });

Of course, so far, this is nothing special and there is no reduction in the mark, even if there is, is very subtle. But when you're dealing with more cumbersome CSS, such as vendor prefixes, Restyle will play its powerful role. The second parameter allows you to specify a vendor prefix for generating results, as shown in the following example:

?

1 2 3 4 5 6

restyle ({      : {          transition: ' background-color 500ms ease ' Code class= "CSS Plain" >;          backgroundcolor: ' #00f '      " }, [ ' Moz ' ' WebKit ' );

The following CSS will be generated:

?

1 2 3 4 5 6

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

This is handy when writing animation rules. A small amount of code can be converted into a large number of rules and CSS property codes that contain vendor prefixes, which require little effort. On the server side, omitting the second parameter will not generate a prefix. On the client side, Restyle.js will generate all common vendor prefixes regardless of which client is currently executing the code.

Depending on the environment, the Restyle () method will return different results. In node. js, it returns a string containing the CSS results. In the browser, the CSS is automatically inserted into the DOM for immediate effect, and the return value is a handy small object, including the attribute node (the result style element), the CSS (including a string of CSS results), and a separate method, remove (), which is used to remove the inserted style from the DOM.

This simple example Web page allows you to write code and generate results through restyle.js. As some comments in Andrea's blog have pointed out, restyle.js and similar library absurdjs are based on the same idea, but the latter is larger and more functional. Restyle.js only one-tenth size, really is a lightweight, interesting CSS preprocessor that is worth a look. You can view the Readme and start learning how to use it.

　　

　　English Links: Simplified CSS preprocessing with restyle.js

　　Translation from: Http://www.infoq.com/cn/news/2014/02/restylejs