An Intro to POSTCSS

Created by AJ Zane / @azanebrain

for Front End Authority

CSS on day 1

#myDiv {
	color: red;
}
/* This is easy. I'm happy. */

A simple non-language that just worked

... becomes:

/* THIS IS INSANE! 
	WHAT HAPPENED TO MY LIFE!? */
.wrapper {
	/* TODO: Extend clearfix */
	width: 100%; max-width: 980px;
}
.headline, .headline-special {
	float: left; font-size: 2rem;
} 
.headline-special {
	/* wait.. are we using this anymore? */
	text-align: center;
}
@media screen and (min-width: 769px) {
	.wrapper {
		background-color: #ccc; width: 95%;
	}
	.headline {
		font-size: 1.5rem; line-spacing: 1.1rem;
	}
}

The map of an inanimate space through time

The Front Ender's Solution:

"Use the tools you have
to get around the problems
caused by your other tools."

  • PHP scripting
  • UX Frameworks
  • Precompilers

Precompilers work great

Provide perks of scripting languages (variables, loops, functions, etc...)

Is it time for something new?

Probably
(╯°□°)╯︵ ┻━┻

What's so good about POSTCSS?

"PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more." ~ GitHub.com/postcss/postcss


If it's not broken, don't fix it, right?

JS Everywhere

JSON: { "colorList": {
  "c1"  : ["#000000", "#000011"],
  "c2"  : ["#000011", "#000022"],
} }
Node: var categories = require('./data/cat-colors.json');
var dataloop = function(css) {
    for ( var category in categories.colorList ) {
        var colorSet = categories.colorList[category];
        var borderTop = colorSet[0];
        var borderBottom = colorSet[1];
        var rule = corepostcss.rule({ selector: '.cat-' + category });
        rule.append({ prop: 'border-top', value: '1px solid ' + borderTop});
        rule.append({ prop: 'border-bottom', value: '1px solid ' + borderBottom + ";"});
        css.append(rule);
    }
};
CSS: .cat-c1 {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000011;
}

Modular (NPM)

postcss.parts

"Bugfixes are pushed often. Minor changes won't break your code. Major releases are, well, major and are not supposed to happen a lot. Codebase is exploded into smart and standalone packages so it's easier to work on something or fix a bug." ~ cssnext.io

  • AutoPrefixer: Handle browser prefixes for select browsers
  • CSSNext: Use future CSS concepts today
  • AtCSS: Extending, importing
  • CSSNano: Really good optimization
  • PreCSS: Sass-like support
  • RuckSack: jQuery like CSS utilities
  • StyleLint: CSS linting

Faster than libsass

Media query organization

Z-Index rebasing

Vertical rhythm

Fits into any workflow:

gulp, grunt, broccoli, webpack,

terminal, codekit

Should you change now?

... maybe?

Take a slow approach

Autoprefixer

Evaluate the necessities of your stack

Add modules when the need arises

Thanks!

I'm AJ Zane (@azanebrain)


Check out POSTCSS

GitHub.com/postcss/postcss


FrontEndAuthority.org