A discussion of PostCSS-cssnext appeared earlier this year in "7 PostCSS Plugins to Ease You into PostCSS", published by SitePoint. PostCSS-cssnext is a plug-in pack for writing next generation CSS. This article provides an insight into the project's history and its benefits. Once we gain a deeper understanding of PostCSS-cssnext, we'll then jump into a handful of examples for you to play with. By the end of the article, you'll be well-versed in future CSS syntax with PostCSS-cssnext, and be able to decide whether it is something you wish to use in an upcoming (or existing) project!
The Need for Next Generation CSS
Regardless of the language, developers are always after the latest features. Whereas tools like Babel provide JavaScript developers with support for future ECMAScript features, PostCSS-cssnext provides web designers with future CSS features. Currently, this means offering support for CSS4-related features, such as CSS variables, nesting, and more! Now, before we go any further, I would like to point out the fact that future CSS features can be subject to change, and the CSS4 spec is no different in this regard. Nonetheless, PostCSS-cssnext alleviates the negative impact this may have on a project by informing users in advance of any changes that are about to occur.
From cssnext to PostCSS-cssnext
Initially, "cssnext" was meant to perform such tasks as minifying code and displaying error messages. These capabilities were helpful, however they did not support future CSS features, which is the ultimate goal of the PostCSS-cssnext project. As a consequence, the cssnext team decided to abandon the idea of cssnext as a standalone tool on the grounds that the time spent supporting it could be better spent on supporting future CSS syntax and any of its subsequent changes. For additional CSS-related processes, developers can integrate PostCSS-cssnext with other technologies like cssnano for code minification and postcss-browser-reporter for error reporting.
Dissecting PostCSS-cssnext
If we delve into the PostCSS-cssnext repository on GitHub, we can see just how modular this plug-in is. Inside the src/features.js file, we'll see that the code for each future CSS feature is enclosed within its own module named in accordance with the relevant CSS specification.
Continue reading %Get Started on the CSS of the Future with PostCSS-cssnext%
by Thomas Greco via SitePoint
No comments:
Post a Comment