Looking to the future: writing CSS with POSTCSS and Cssnext

Mark Goodyear

Original link: A Look into writing future CSS with Postcss and Cssnext

Like TWITTER,GOOGLE,BBC used, I'm going to take a look at the world of CSS that uses POSTCSS processing.

What is POSTCSS?

Postcss is a post-processor that uses JavaScript plugins to convert CSS. Postcss itself doesn't do anything for your CSS, you need to install some plugins to start working. This not only makes it modular, but also has a stronger function.

It works by parsing the CSS and converting it into a node tree of CSS, which can be controlled by JavaScript (that is, the plugin works). Then return to the modified tree and save it. It works differently with sass (a preprocessor), where you basically compile CSS in a different language.

What exactly is preprocessing and post-processing?

To explain the difference between preprocessing and post-processing in a simple way, I'll take the unit conversion example. When writing sass, we can use the function to convert px into rem

/**/{ margin-bottom: rem (20px);} /*  */{ margin-bottom: 1.25rem;}

This saves us the time we manually calculate. But through POSTCSS, we can do better. Because it is post-processing, we do not need any function to compile the CSS. We can write the pxdirectly, which can be automatically converted to rem.

/** *{ margin-bottom: 20px;} /*  */{ margin-bottom: 1.25rem;}

POSTCSS will process the declaration before each px value appears and run the calculation, converting it to rem value. Note: Because of the nature of Postcss modularity, you need postcss-pxtorem to use it to complete the conversion.

Use Cssnext to write future CSS

We can take advantage of some of the additional CSS specifications that cssnext adds to the style sheet. Cssnext is a POSTCSS package that contains a number of feature components, such as custom properties and custom selectors:

/**/{  --heading-color: #ff0000;} /*  */@custom-selector:--headings H1, H2, H3, H4 , H5, h6; /*  */{   color: var (--heading-color);}

Through Cssnext, the above code will be processed into the following content

{   color: #ff0000;}

Looking to the future: writing CSS with POSTCSS and Cssnext