Post-CSS a new curve of writing CSS .

Ishan Manandhar

Jun 26, 2016·4 min read

Hi,

I am Ishan, UI/UX Designer based in Kathmandu. I work at a well established Digital Agency in Nepal and I am a passionate design learner.

Few days back, I was surfing Google as always and something new and impressive came before my eyes — Post-CSS. Damn they have a weird looking logo. While I went researching more about this new topic of interest, I was really excited and fascinated with its new powerful features.

how can we write future code now !!

So, I am here going to share with you how we can write something from future code now. Sounds weird right, isn’t it ?

Okey let’s start,

New approaches to Web Development is an on-going process. Earlier, life of many developers and designers used to feel easy with the introduction of CSS Pre-processors like: Stylus,LESS,SASS etc. But, one of recent tools, that I came across, for styling is Post CSS (Post-Cascading Style Sheet). It works more effectively with the same principles of above mentioned Pre-processors. Actually Post CSS is rapidly becoming popular with the usage in companies, like Google, Wordpress, Twitter, Wikipedia etc. Indeed, PostCSS has taken over each and every previously introduced pre-processors with its countless features.

Must be enough with the praise! Now, let’s dive into real talks.

So, you may be wondering about how we write something of the future at present(Ummm!). It is what Post-CSS have offered with its potential. PostCSS has been a new kind of tool for working with CSS, which enables us to easily transform our CSS with JavaScript plugins. Many contributors have made numerious efforts towards it, It has 200+packages/plugins inside it now .

Among many of its Plug-ins we have cssnext https://github.com/MoOx/postcss-cssnext

This plugin helps us to use CSS4 styling properties into CSS3.This what really meant writing future code now .

So, hope you are now impressed with this new powerful features that the PostCSS has offered us. Now, let’s give our focus on how we start it and how cool is PostCSS.

First, Let’s learn how to set up the files for running up PostCSS.

First, we install PostCSS and the plugins we need using npm, e.g.

npm install gulp-postcss postcss-mixins postcss-simple-vars postcss-nested autoprefixer-core --save-dev

In above command we did install PostCSS and other about four commands to install plugins for our task 1)postcss-mixins 2)postcss-simple-vars 3)postcss-nested 4) autoprefixer-core which are provided as a open source plugin for PostCSS. After, we have created package manager files from our command.We got to do is, run these packages with Js. We can use Gulp or Grunt to process these packages .I will demonstrate it using Gulp as my task automation process.

Now lets create a gulpfile.js ( if you are unfamiliar with gulp pls read — getting started with Gulp by Travis Maynard)
https://travismaynard.com/writing/getting-started-with-gulp

Inside our gulpfile.js we declare a variable postcss and gulp itself to process our gulp file.Like,

var
	gulp = require('gulp'),
	postcss = require('gulp-postcss'),
	processors = [
		require('postcss-mixins'),
		require('postcss-simple-vars'),
		require('postcss-nested'),
		require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
	];

In above gulp file we have and write a CSSprocessing task ,

// compile CSS
gulp.task('css', function() {
  return gulp.src('source/css/styles.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('dest/styles/'));
});

Let Us assume we have wrote following CSS code inside our style.css (your path name) file

$colorfore: #333;
$colorback: #fff;

@define-mixin reset {
	padding: 0;
	margin: 0;
}

main {
	font-family: Arial;
	@mixin reset;
	color: $colorfore;
	background-color: $colorback;
	
	article {
		color: $colorback;
		background-color: $colorfore;
	}
}

After running the Gulp command, we can see the new file created as,

main {
	font-family: Arial, sans-serif;
	padding: 0;
	margin: 0;
	color: #333;
	background-color: #fff;
}

main article {
	color: #fff;
	background-color: #333;
}

Here, what we can see is our plugins for mixins, simple-vars(variable declarations),Nested CSS structure and autoprefixer( not shown in example) are processed.

Now, I hope you understood how lightweighted and powerful is Post-CSS with its growing Plugins and simple features.

__________________________________________________________________

Why Use PostCSS ?

Now let me highlight the reasons. First, PostCSS has more possibilities for its growth in near future (I can feel it coming :)) Let’s point out in details what we could gain by using it for our development works.

• Extremely Fast. (36ms compile time — based on what modules you have added — which is far more faster than Libsass, Less, Stylus, Sass)
• It’s very light-weighted (Just keep whats needed — add just the plugins needed — add a plugin add your file size)
• Source code is comprehensible to anyone with a small knowledge of CSS
• Source Code is future-proof,portable and easy to debug.
• Based on Modules(Needs to add the plugins and functions we need for our project)
• Immediate implementation (Can develop own features inside PostCSS)
• Java script functions( based on a true and strong programming language).

Beside these some features PostCSS provides us are NOT provided using simply Pre-processors.Features like (Autoprefixer,CSSnext,CSSgrace, PostCSS colour blind,Post CSS_bem_linter etc.)

SUMMING UP

Many majority of style sheet authors are currently using sass(which i personally love) . But, now i myself want to jump into the world of PostCSS. If a modular CSS plugin system could replicate — and even mix — the syntax and functionality we want from Sass, LESS and Stylus, we would have a single pre-processor to beat all others.

So,like me if you are now excited about using PostCSS in your coming project works please do read related important articles such as,

or

https://blog.colepeters.com/on-writing-real-css-again/

and interesting funny topic article by Benfrain :

enfrain.com/breaking-up-with-sass-postcss/

So, have you decided to start using PostCSS ? Has it succeed to drag you away from Sass? Are you going to dive into LESS? Or you think using Stylus is still okey for you?

The choice is yours.

Happy Coding !!