BBVA API Market
PostCSS is often compared with style preprocessors like LESS, Sass or Stylus, but this is not the case. PostCSS analyzes the CSS code and turns it into a document that can be edited using plugins in JavaScript. Edit in what sense? This depends on each plugin: from code optimization, color retouching and adding customized selectors and properties, to BEM and SUIT class methodologies, analyses and shortcuts… It is a tool of tools, a process simplifier for JavaScript developers.
Traditional CSS preprocessors have several relevant issues compared to what an alternative like PostCSS can offer. This analysis of the Sitepoint specialized site for developers is really accurate:
● Traditional preprocessors are not extensible. Each one has a number of features that cannot be modified or expanded. A proprietary extension needs to be created to do so.
● Each CSS preprocessor has its own standards, in most cases far removed from W3C standards. Bringing a project’s design standards over to W3C creates problems.
● With PostCSS, developers have plugins that do adapt to W3C design standards. This means that the entire process for developing the project is in line with those standards, without any problems.
● If those plugins do not offer what is needed, PostCSS offers developers the possibility of designing their own. Moreover, the plugins can be installed separately and the developer can decide the order in which they are run. They can also be configured.
PostCSS can be installed in several rather simple ways. One is through an automatic task configurator for JavaScript. These tools are quite common in the case of JS developers. Some of the most interesting ones are Grunt, Gulp or Broccoli. In all cases their is a dependency with respect to Node.js, so the JavaScript interpreter needs to be installed first.
Once we have Node.js on the computer, Gulp should be installed. Installation command:
npm install -g gulp
If the Linux or Mac OS X operating system is being run, the command would be as follows:
sudo npm install -g gulp
When developers have the project fully configured and with Node.js and Gulp running on the computer, all the developer needs to do to install PostCSS is use the following command line: npm install –save-dev gulp-postcss. Does Gulp need to be installed in order to configure PostCSS on the computer? No, it’s one way of installing it if we often use this task manager for projects.
We can also run the following installation command in npm to configure PostCSS without the need for Gulp, Grunt or Broccoli: npm install -g postcss-cli. The best way to make sure that everything is alright and PostCSS is installed, is to run this command: postcss –help. PostCSS has all the configuration documentation in the GitHub respository.
Each of these plugins performs functions and has very specific features that sets it apart from the rest. This is why on many occasions developers do not use plugins separately and prefer to use plugin bundles that combine functionalities. The best known is probably cssnext. Here is the open repository of this metaplugin in GitHub. Here is the documentation.
cssnext offers all kinds of features. This is the complete list of the most noteworthy ones. Some of them are:
● Customized color selectors.
● Adaptable media queries.
● Customized properties and variables.
● CSS pseudo-classes.
● Property filter.
● Color function.
● Adding fallbacks in RGBA colors.
● Ability to add conditionals.
● Grid system.
● Optimization tools.
● Shortcuts.
It is not the only plugin the combines different functionalities. PreCSS, a plugin bundle developed by Jonathan Neal, is also widely used by the developer community. The command for installing PreCSS with npm is as follows: npm install precss –save-dev. This is a fairly comprehensive tutorial on how to install this plugin bundle with or without a task manager such as Gulp or Grunt. All of its specific features are very well summarized.
Developers also have some repositories to run sorted searches for specific plugins for PostCSS. One of the most frequently used is PostCSS.parts. It has a great search engine and in addition the plugins are sorted by category, such as optimization, media queries, color, fonts, images or shortcuts. It’s as easy as going to the category and exploring the options.
Follow us on @BBVAAPIMarket
In a connected world, APIs are the glue that keeps all the parts that form our day-to-day lives in place. The same way the power of glue depends on the material it is used on and the knowledge of its properties, APIs are only as useful as their documentation allows for.
There are different solutions to monitor the performance of an API, in terms of traffic, quality and speed of the answers it provides. Detecting faults in the code or quantifying the generated revenues are also some of the options offered by these useful tools.
App users must be aware that a button... is in fact a clickable button. Therefore, app buttons must be designed in such a way that users should feel invited to interact with the interface and actually click on it.
