Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

An Introduction To PostCSS

The development of CSS, like all languages, is an iterative process. With every major release, we get new features and syntaxes that help us write our styles. CSS Level 3 introduced features that enable us to design interactions that previously were possible only with JavaScript. With every new day, tools emerge to make styling easier and more flexible.

One of the relatively recent tools introduced for styling is PostCSS1. PostCSS aims to reinvent CSS with an ecosystem of custom plugins and tools. Working with the same principles of preprocessors such as Sass and LESS, it transforms extended syntaxes and features into modern, browser-friendly CSS.

How you ask? JavaScript.

JavaScript has the ability to transform our styles much more quickly than other processors. Using task-runner tools like Gulp and Grunt, we can transform styles through the build process, much like Sass and LESS compilation. Libraries and frameworks like React and AngularJS allow us to write CSS directly in our JavaScript, opening the door for JavaScript transformation of our styles.

The History Of PostCSS

Developed by Andrey Sitnik2, creator of Autoprefixer, PostCSS was launched as a method to use JavaScript for CSS processing. PostCSS on its own is simply an API, which, when used with its vast ecosystem of plugins, offers powerful abilities. To provide helpful debugging, source maps are generated, and an abstract syntax tree (AST) exists to help us understand where and how code is being transformed.

Because PostCSS uses the Node.js framework, the abilities of the language and tools can be easily modified and customized as needed. Other tools such as Sass and LESS limit the abilities of the system to the methods available when the compiler was written.

Due to its use of an API, PostCSS allows us to create custom plugins and tools for any features they may need. This modular platform design makes the tool neutral, which in turn focuses features on project requirements. PostCSS is agnostic to language format and allows for the syntax style of different preprocessors, like Sass and LESS, if needed.

The Benefits Of Thinking Modularly

Most developers rarely start a project from scratch. Many start with a Sass boilerplate that holds variables, mixins and functions to be used in a given project. We’ll have a separate style sheet for functions, mixins, grid systems and general utilities to make production easier. At the end of the day, we end up with 10 or more style sheets to keep things organized.

Maintaining a library of Sass or LESS snippets can be an overwhelming task and can leave a project bloated. Many projects have unused mixins and functions, included as “just in case” code. PostCSS enables easily installable, plug-and-play modules, making the development process more flexible for the unique needs of a project.

PostCSS moves all of the code needed to create functions, utilities and mixins out of our production style sheets and wraps them as plugins. Now, for each project, we can pick and choose the tools needed by including plugins in our task runner.

An example of this power is the plugin PostCSS FontPath43. With Sass, we could include a mixin in our files that allows for custom web fonts; thus, we created @font-face tags.

@mixin importfont($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {
  @font-face {
    font-family: '#{$font-family}';
    src: url('#{$font-filename}.eot');
    src: url('#{$font-filename}.woff') format('woff'),
    url('#{$font-filename}.ttf') format('truetype');
    font-weight: $font-weight;
    font-style: $font-style;
    font-stretch: $font-stretch;
  }
}
@include importfont('mission script', 'fonts/mission-script-webfont', 300);

Using the PostCSS FontPath43 plugin in our project, we no longer need to include Sass mixins like the one above. We can write the following code in our CSS, and PostCSS will transform it, via Grunt or Gulp, into the code we need.

@font-face {
  font-family: 'My Font';
  font-path: '/path/to/font/file';
  font-weight: normal;
  font-style: normal;
}

As of the writing of this post, over 100 community plugins are currently available that allow for such things as future CSS syntax, shortcuts, tools and extensions of the language. It is beyond a “cool tool,” and it currently counts WordPress, Google and Twitter teams among its user base.

Adding PostCSS To Your Workflow

Because PostCSS is written in JavaScript, we can use task runners like Gulp5 and Grunt6 to transform the CSS in our projects. The tutorial below demonstrates how to incorporate PostCSS in your workflow via either Gulp or Grunt. Using one tool over the other is not crucial and is simply a matter of personal preference or what’s best for the project.

Note: A complete version of both the Gulp and Grunt versions of the tool is available on GitHub7. Feel free to use it as a starter template and to expand on it as needed.

Setting Up PostCSS With Gulp

If you are unfamiliar with Gulp, I’d recommend reading “Building With Gulp8” by Callum Macrae to get up and running with the tool.

To install the PostCSS module in your project, run the following command in your terminal: npm i gulp-postcss -D.

In your project’s Gulpfile.js, we need to require our installed PostCSS module and then use it within a task. Be sure to update the paths to your development files and the directory where the transformed output will go.

var postcss = require('gulp-postcss');

gulp.task('styles', function () {
    return gulp.src('path/to/dev/style.css')
        .pipe(postcss([]))
        .pipe(gulp.dest(path/to/prod))
});

To run the task, type gulp styles in the command line.

Setting Up PostCSS With Grunt

Note: If you are unfamiliar with Grunt, I’d recommend reading “Get Up and Running With Grunt9” by Mike Cunsolo to get comfortable with the tool.

To install the PostCSS module in your project, run the following command in the terminal: npm i grunt-postcss -D.

Once the plugin is installed on your system, enable it within the Gruntfile and create a task, as below. Be sure to update the cwd and dest values to reflect the structure of your app.

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    styles: {
      options: {
        processors: []
      },
      dist: {
        files: [{
          expand: true,
          cwd: 'dev/',
          src: ['**/*.css'],
          dest: 'prod/'
        }]
      }
    }
  });

  // Load post-css.
  grunt.loadNpmTasks('grunt-postcss');

};

To run the task, type grunt styles in the command line.

Installing Plugins

Using PostCSS on its own is not entirely powerful; its strength lies in the plugins. You may have noticed that in the Gulp and Grunt implementations above there were empty arrays in the task declarations. These arrays are where we can import community-developed PostCSS plugins, the features we want to include in our tool.

A list of approved PostCSS plugins can be found on PostCSS’ GitHub page10 and, like all NPM packages, the plugins can be installed through the command line. Many plugins can be used only as extensions of PostCSS and are agnostic to the task runner you are using. For this example, we will install the PostCSS Focus11 plugin, which will add a :focus to every hover state.

With all of the plugins in the following examples, we will need to use the command line and NPM to install the packages in our projects.

PostCSS Plugin Installation Example Link

npm i postcss-focus -D

The plugins can be passed into the method directly; however, for the sake of cleanliness, we can construct an array and pass it in as an argument. In the array, we can include the necessary require statements that return the plugins and that are then called immediately. If you would like to read more about this concept, look through “Functions as First-Class Citizens in JavaScript12” by Ryan Christiani.

require('postcss-focus')()

The modified code for Grunt, with our newly created processorArray arrays, is below:

var processorArray = [
    require('postcss-plugin')()
];

// Snipped for brevity
styles: {
      options: {
        processors: processorArray
      },
      dist: {
        src: 'path/to/dev/style.css',
        dest: 'path/to/prod/style.css'
      }
    }

And here is the modified code for Gulp:

var processorArray = [
    require('postcss-plugin')()
];

gulp.task('styles', function () {
    gulp.src('path/to/dev/style.css')
        .pipe(postcss(processorArray))
        .pipe(gulp.dest('path/to/prod'))
});

Plugins

Once we have installed a plugin and our build tool is prepared to compile our code, we can use PostCSS and the plugin features. The first thing to do is create a file with a .css extension in the directory where we store our development code.

“Wait! A CSS file?” Yup, a CSS file. Because PostCSS transforms our CSS, we don’t need to use a specialized syntax — just traditional CSS. If you are familiar with preprocessors, then it might feel unnatural to leave the .sass, .scss, .styl or .less files behind and return to .css. But, in fact, it’s not converting — it’s transforming.

To process our styles with our newly installed PostCSS plugins, we can run our task runners with grunt styles and gulp styles, respectively. Our development CSS file will be processed through the PostCSS plugin and the plugins provided, and then it will be outputted to our specified production directory.

Below are a few plugins of note that might be of benefit as you get started with PostCSS. Included are instructions on installing and using the plugin.

Autoprefixer

Writing styles to work on a wide gamut of browsers and devices can be a pain, and keeping up to date with which properties and values need a vendor prefix is a challenge in itself. Luckily, Autoprefixer13 figures out where and when to provide vendor prefixes. The plugin frees us to write styles with modern features and properties in mind, while taking care of vendor prefixes on the properties and values that need them.

Here is how to install this plugin via the command line:

npm i autoprefixer -D

When we add the plugin to our array, we can provide an object that contains an array of the browser scope the project will need to support. A list of options that can be provided is found at the Browserslist Github Account14.

Let’s add the Autoprefixer plugin to our processors:

var processorsArray = [
  // snipped for brevity
  require('autoprefixer')({ browsers: ['last 2 versions', 'ie 6-8', 'Firefox > 20']  })
];

The appropriate vendor prefixes will be outputted to any CSS properties and values in our styles that need them, according to the object provided.

Here is the development CSS:

.item {
  display: flex;
  flex-flow: row wrap;
}

And here is the transformed output:

.item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

Using Future Syntaxes With CSSNext

CSS4 will soon be upon us, and with it comes features such as native variables15, custom media queries16, custom selectors17 and new pseudo-links18. While they are not yet supported in all browsers as of the writing of this article, they will be implemented in modern browsers as the specification gets approved.

CSSNext19 is a tool that transforms any CSS4 features and properties into CSS3 that browsers can read. The tool can be used on its own or as a plugin through PostCSS. Again, we can add it to processorsArray, which contains our other PostCSS plugins.

Install the CSSNext plugin via the command line, like so:

npm i cssnext -D

Then, add the plugin to your processors:

var processorsArray = [
  // snipped for brevity
  require('cssnext')()
];

Now, in your production code, you can write CSS4 features, and PostCSS will transform the syntax through the task runner, thereby supporting today’s browsers. When browsers come to support the newer syntax, you can replace the transformed output with the development CSS.

Here is the development CSS:

// Custom Variables
:root {
  --linkColour: purple;
}

a {
  color: var(--linkColour);
}

// Custom media queries with ranges
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

@media (--only-medium-screen) {
  /* Medium viewport styles */
}

// Custom selectors
@custom-selector :--enter :hover, :focus;
@custom-selector :--input input, .input, .inputField;

a:--enter {
  /* Enter styles go here */
}

:--input {
  /* Input field styles go here */
}

And here is the transformed output:

a {
  color: purple;
}

@media (min-width:500px) and (max-width:1200px){
  body{
    background:#00f;
  }
}

a:focus,a:hover{
  background:#00f;
}

.input, .inputField, input{
  background:red;
}

If you would like to explore more CSSNext features, the website has a playground20 where you can experiment with current CSSNext-supported CSS4 features.

Sass Syntax

If Sass is your go-to preprocessor language, fear not: You can use the syntax and its tools with PostCSS. While traditional CSS doesn’t yet support variables, nesting and imports, plugins such as PreCSS21 allow us to use these features and to write Sass syntax in our traditional CSS files.

If we add the plugin to our build via the command line and refer to the package in our array, we can start writing in Sass syntax immediately. If you’re making the switch from Sass to PostCSS, you can change the file extension to .css and immediately pipe it through your task runner.

Install the PreCSS plugin via the command line, like so:

npm i precss -D

And add the plugin to your processors:

var processorsArray = [
  // snipped for brevity
  require('precss')()
];

Again, here is the development CSS:

/*Variables*/
$blue: #0000ff;
$green: #00ff00;
$radius: 10px;

.square {
  background: $blue;
  border-radius: $radius;
}

/*Imports*/
@import "partials/_base.css";

/*Mixins*/
@define-mixin square $dimension {
    width: $dimension;
    height: $dimension;
}

/*Nesting, variables and mixins*/
.button {
  @mixin square 200px;
  background: $green;
  &:hover {
    background: $blue;
  }
}

And the transformed output:

.square {
  background: #0000ff;
  border-radius: 10px;
}

.button {
  width: 200px;
  height: 200px;
  background: #00ff00;
}

.button:hover {
  background: #0000ff;
}

Extending CSS With Community Plugins

While plugins are available to help us write code more efficiently, the power of PostCSS lies in the community plugins. These plugins give us quicker ways to write styles, or at least easier ways to implement creative styling. Using the PostCSS API, these plugins allow for custom properties, selectors and values in our projects, enabling us to write styles more efficiently and with less Googling.

Quantity Queries

Quantity queries22 are powerful. They allow us to count elements with CSS23 and apply styles based on their number of siblings. While the selectors are a bit tricky to write, because they use some advanced CSS selectors, you can use them in your CSS today24. While online tools like QQ25 exist to help us write these queries, we can use PostCSS to use custom selectors in our styles directly.

To use quantity queries, install the Quantity Queries plugin in your project like any other, via the command line:

npm i postcss-quantity-queries -D

And add the plugin to your processors:

var processors = [
  // Snipped for brevity
  require('postcss-quantity-queries')()
];

Once it’s installed, you can use custom selectors, available only through the plugin, to apply styles based on matched elements.

Here is the development CSS:

// To apply styles if 'at least' number of sibling elements present
.container > .item:at-least(5) {
  background: blue;
}

// To apply styles if 'at most' number of sibling elements present
.item > a:at-most(10) {
  color: green;
}

// To apply styles if number of sibling items 'between' a range is present
.gallery > img:between(4, 7) {
  width: 25%;
}

// To apply styles if 'exactly' number of provided items is present
.profiles:exactly(4) {
  flex: 1 0 50%;
}

And the transformed output:

// To apply styles if 'at least' number of sibling elements present
.container > .item:nth-last-child(n+5), .container > .item:nth-last-child(n+5) ~ .item {
  background: blue;
}

// To apply styles if 'at most' number of sibling elements present
.item > a:nth-last-child(-n+10):first-child, .item > a:nth-last-child(-n+10):first-child ~ a {
  color: green;
}

// To apply styles if number of sibling items 'between' a range is present
.gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child, .gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child ~ img {
  width: 25%;
}

// To apply styles if 'exactly' number of provided items is present
.profiles:nth-last-child(4):first-child, .profiles:nth-last-child(4):first-child ~ .profiles {
      flex: 1 0 50%;
}

Extended Shorthand Properties With Short

When writing styles, you might encounter properties whose syntax makes you say, “That could be shorter.” Luckily, the Short26 plugin helps us do just that: write our styles more logically. It enables us to write shorthand properties for position and size, much like how background and font can be condensed into a single declaration.

Through the PostCSS API, the shorthand declarations are transformed into browser-digestible styles, allowing for a cleaner development style sheet and a more organized production style sheet.

Install Short via the command line:

npm i postcss-short -D

Add the plugin to your processors:

var processors = [
  require('postcss-short')()
];

The text property includes these typographical properties: color, font-style, font-variant, font-weight, font-stretch, text-decoration, text-align, text-rendering, text-transform, white-space, font-size, line-height, letter-spacing, word-spacing and font-family.

And here is the development CSS:

p {
  text: 300 uppercase dimgrey center 1.6rem 1.7 .05em;
}

And the transformed output:

p {
  color: dimgrey;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
  font-size: 25px;
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: .05em;
}

The position property allows for top, left, right, bottom values to be included in the declaration. The order of the values27 is clockwise, in a syntax with values from 1 to 4. If there is a value you care to exclude, simply pass an * in its place.

Here is the development CSS, then:

section {
  position: absolute 10px * *;
}

.topNav {
  position: fixed 0 * * 0;
}

.modal {
  position: fixed 40% 25%;
}

And the transformed output:

section {
  position: absolute;
  top: 10px;
}

.topNav {
  position: fixed;
  top: 0;
  left: 0;
}

.modal {
  position: fixed;
  top: 40%;
  right: 25%;
  bottom: 40%;
  left: 25%;
}

What Does This Mean For Our Industry?

Using PostCSS today and reaping the benefits are completely possible. Much like how we compile Sass and LESS, you can incorporate it in your workflow by modifying your task runner to process PostCSS. Incorporating a plugin like PreCSS allows your existing Sass projects to be ported over to PostCSS without needing any conversion of the syntax.

As of the writing of this article, a discussion is ongoing about where is the best place to write our CSS. With libraries such as React28 gaining popularity, the idea of writing styles within the components29 themselves, which allows us to transform styles with JavaScript directly on compilation, is gaining momentum. While this is still very much a discussion, it is indeed one way to transform styles with PostCSS.

Another project making waves in the industry is CSS Modules30, which scopes styles to local files and requires them as needed. This concept is already popular in JavaScript circles. And as the lines between front-end languages such as React and JSX31 continue to blur, it becomes hard to ignore the combined power of CSS and JavaScript.

While PostCSS extends CSS in brand new ways through custom syntaxes and properties, it could present challenges to beginners who are trying to get comfortable with the language and its intricacies. If you use PostCSS in a project with a junior developer, try to encourage in them a deep understanding of the language and of how PostCSS, much like Sass, is simply a production tool that allows styles to be written efficiently.

Adopting PostCSS Today

Over the next few years, the way we use CSS will change in many different ways. Every project will have different requirements, to which we will have to adapt our production methods. Working within a modular ecosystem like PostCSS allows us to pick and choose the features we want to complete a project.

I encourage you to explore the PostCSS world and all of the plugins available in it. Because it is a community project, the ecosystem will grow only if people use it and create plugins. To explore more plugins, view the available packages32 on NPM and test their abilities in the PostCSS Playground33.

(rb, al, ml)

Footnotes Link

  1. 1 https://github.com/postcss/postcss
  2. 2 http://sitnik.ru/en
  3. 3 https://github.com/seaneking/postcss-fontpath
  4. 4 https://github.com/seaneking/postcss-fontpath
  5. 5 http://gulpjs.com/
  6. 6 http://gruntjs.com/
  7. 7 https://github.com/drewminns/postCSS-starter
  8. 8 https://www.smashingmagazine.com/2014/06/building-with-gulp/
  9. 9 https://www.smashingmagazine.com/2013/10/get-up-running-grunt/
  10. 10 https://github.com/postcss/postcss
  11. 11 https://github.com/postcss/postcss-focus
  12. 12 http://ryanchristiani.com/functions-as-first-class-citizens-in-javascript/
  13. 13 https://github.com/postcss/autoprefixer
  14. 14 https://github.com/ai/browserslist
  15. 15 http://www.w3.org/TR/css-variables/
  16. 16 https://drafts.csswg.org/mediaqueries/#custom-mq
  17. 17 https://drafts.csswg.org/css-extensions/#custom-selectors
  18. 18 https://drafts.csswg.org/selectors-4/#negation
  19. 19 http://cssnext.io/
  20. 20 http://cssnext.io/playground/
  21. 21 https://github.com/jonathantneal/precss
  22. 22 https://github.com/pascalduez/postcss-quantity-queries
  23. 23 https://www.smashingmagazine.com/2015/07/quantity-ordering-with-css/
  24. 24 https://www.smashingmagazine.com/2015/07/constructing-css-quantity-queries-on-the-fly/
  25. 25 http://quantityqueries.com/
  26. 26 https://github.com/jonathantneal/postcss-short
  27. 27 https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases
  28. 28 http://facebook.github.io/react/
  29. 29 https://facebook.github.io/react/tips/inline-styles.html
  30. 30 https://github.com/css-modules/css-modules
  31. 31 https://facebook.github.io/react/docs/jsx-in-depth.html
  32. 32 https://www.npmjs.com/browse/keyword/postcss-plugin
  33. 33 https://sneakertack.github.io/postcss-playground/

↑ Back to top Tweet itShare on Facebook

Advertisement

Drew Minns is a Developer, Designer and Educator from Toronto, Canada. Currently working as Lead Instructor and Developer for HackerYou, Drew stays on the edge of the industry to educate those around him.

  1. 1

    Andrey Sitnik

    December 7, 2015 4:29 pm

    Hi. Thanks for the article. But it has one very big mistake. autoprefixer-core npm package was deprecated. Now you should use autoprefixer npm package for PostCSS.

    4
    • 2

      Very much agree! There was a bit of a delay between the article and posting, so I will be making the change shortly!

      1
  2. 3

    Andrey Sitnik

    December 7, 2015 4:36 pm

    Also I could definatly recommend three other way to use PostCSS:

    Split your project CSS into small, isolated and maintainable components by CSS Modules, postcss-autoreset and all: initial. I told about it on dotCSS.
    Lint CSS with Stylelint.
    Manage a image in CSS by postcss-assets and change color for base64 encoded SVG in CSS by postcss-inline-svg.

    5
  3. 4

    Whilst I agree that this system is flexible and powerful, it does have me worried. Look at that syntax, it’s plugin-specific even.

    My concern is this: what if in a few years, somebody has to re-author that “CSS”. What if gulp and grunt are replaced with a different tool by then, or postCSS plugins abandoned or incompatible with your version, as it happens so often with npm modules? What about knowledge? Will anybody understand this then legacy technique?

    13
    • 5

      You can freeze plugins versions and uses old versions for legacy code.

      Grunt and gulp is not mondatory for PostCSS. It has and will have many connection middlwares for different environment. At least, you can anyway uses CLI tool from any environment.

      But I agree with your. All entire current IT mood is to move forward. Nobody thinnk about legacy code.

      0
  4. 6

    Nicolás Danelón

    December 7, 2015 10:41 pm

    Why go back to CSS if you got SASS with mixing, includes and functions? Today I install bootstrap with SASS .. How can I implement this?

    0
    • 7

      Technically: PostCSS has nested, mixins and variables. Think about PostCSS not like goind back to CSS, but like it is a new Sass, which is much more powerful. PostCSS is like a Sass, but you can do Autoprefixer, CSS Modules, Stylelint there.

      0
    • 9

      You also don’t have to replace Sass in order to try out PostCSS. If you’re comfortable with Sass but still want to reap some of the benefits that PostCSS provides then you can use both without much problems (depends on the plugins you want to take advantage of though).

      Your pipeline would look like:

      Preprocessor (Sass, Less, etc) -> CSS -> PostCSS (plugins like Autoprefixer, Font Magician, Pixrem etc)

      3
  5. 10

    I’m not sure I fully understand the benefit of using PostCSS than Sass. I can use sass in modular manner as well. Other than the performance (JS transform css faster than using css compiler), what’s the difference?

    I have been using Gulp or Grunt to compile those scss files. How to integrate the PostCSS in my current process?

    4
    • 11

      The reason to use PostCSS is because PostCSS is much more powerful, than Sass. Sass can’t do a lot of stuff. Like you can’t do Autoprefixer there or CSS Modules.

      So think about PostCSS as much powerful Sass replacement.

      2
  6. 12

    CSS is the most useful for web design. You can integrate to make creative web design which helps to attract users to your web site. This is very nice blog and it gives the information about history of CSS which is useful to improve knowledge.

    -18
  7. 13

    This looks like too much development, before you even start development. Nice proof of concept, but I can’t imagine this in large-scale application.

    0
    • 14

      Right now PostCSS is used in WordPress, Google AMP, the largest Chinese e-commerce Taobao.

      1. You can use plugins withour extra syntax. Like Autoprefixer, CSS Module, Stylelint or css-property-sorter.
      2. You can use postcss-use to explicit show what plugins will be used directly in this file.

      0
      • 15

        When you say “plugins” – I understand that it’s used here and there. I am having hard time to imagine the whole front-end architecture build around it. As stated by other people, the support for plugins and features in the long term is something really important. I work on products with the life span of 5+ years, not something that’s getting re-designed every year. Furthermore I don’t see any real benefit over either SASS or LESS. The latter is even part of Visual Studio now.

        1
        • 16

          Yeap, I agree, that plugins has problems. But look into builg tools. Gulp, Grunt, webpack, they all uses plugins. It is a mainstream right now.

          0
        • 17

          Look into Autoprefixer, if you need short answer about PostCSS benefits. For example, Google recommends only Autoprefixer as tool to handle prefixes.

          0
          • 18

            “Look into Autoprefixer”

            Autoprefixing can be effortlessly accomplished in CSS, SASS or LESS in conjunction with gulp/grunt and a preprocessor ( add a watch plugin for seamless preprocessing).

            Other methods allow libraries like bourbon.io to handle the autoprefixing up front in the code negating the need for an autoprefixer to run in the build tools.

            It is good that an autoprefixer is part of the PostCSS ecosystem but by no means should it be the primary reason to migrate to the PostCSS ecosystem. It is a utility feature at best.

            In the end all the page cares about is that it has valid CSS to render the page with. PostCSS aside, the new inline frameworks are great but it may pull developers away from the most important and useful part about CSS… the Cascading.

            0
          • 19

            Yeah, I get your point.

            Check this however – if you are using a more advanced IDE, you don’t need any of that grub, gulp, drob, phop non-sense.

            This process is having too many dependencies involved – further more, try synchronizing these tools over 400 or 1000 developers worldwide working on the same code base. Madness!

            0
        • 20

          “The latter is even part of Visual Studio now…” IMO the beauty of postCSS is that it provides an unified platform for all you need. If Visual Studio implemented PostCSS system that would keep happy everyone. You wold not have to choose between Sass or Less. There would not be Sass OR Less frameworks, themes etc… It is the way to go. At the same time I understand all the “pros” used to the tools they are familiar with, but unfortunately progress happens always outside of the “comfort zone”… ;)

          -1
  8. 21

    Why does everyone want to implement a Rube Goldberg machine to implement things as basic as styling?

    Just pick up the hammer and hit the nail.

    When I see an entire sprint devoted to upgrading the framework – I am no longer a believer in frameworks in general. The juice is never worth the squeeze. Too many moving parts = technical debt. That’s why harddrives are SSD now. Faster, more reliable.

    The theory that they increase speed and maintainability in practice = false.

    19
    • 22

      Came here to say this, but I probably wouldn’t have conveyed my point as well as you just did.

      0
    • 23

      Andrey Sitnik

      December 8, 2015 7:32 pm

      You are right web development evolving very fast.

      But PostCSS goal is not syntax sugar (mixins, vars, nested). So you can use still Sass, but add PostCSS for maintaibility tasks.

      First step is to add Autoprefixer. You may keep you sources without any changes. Just add PostCSS with Autoprefixer plugin and it will clean your CSS from unnecessary prefixes. And you will be able to write new CSS without any prefixes, Autoprefixer will add prefixes for you.

      Nest, you should add Stylelint. It will lint your source for common mistakes. Again you can use your old Sass code, just add PostCSS after Sass.

      Then you may add cssnext and start to write CSS4 in new sources (old sources again can be in Sass withour any changes).

      And in the last step you can add CSS Modules, postcss-autoreset with all: initial for new components. It will isolate this components (no global selectors and inherited properties). As result it will be muc more maintable.

      But look back: we increase your code maintaibility without rewritting entrire project from Sass to PostCSS ;).

      0
    • 24

      I agree, frameworks are nice for rapid prototyping and building of POCs, where performance and code quality don’t matter. Large scale applications require more in depth architectural analysis.

      1
  9. 25

    I agree with the modular CSS code.
    But i fear with creating lot of plugins for postCSS just like npm modules, one will end up in the world with so many plugins to search with! else again google the best combination of plugins to start with.

    Again completely agree with the ease of development, esp with Autoprefixer, but may not want to create plugin for all the components needed.

    0
  10. 27

    I am using PostCSS in template Polymer Starter Kit Plus.

    -1
  11. 28

    I haven’t used Grunt or Gulp for a year now, only npm. Is there a nice tute how to use postcss with npm? I searched the net for a day without finding anything without Gulp and Grunt.
    Sheers

    0
  12. 31

    Dmitry Olkhovoi

    December 17, 2015 2:45 pm

    Hi.

    var processorArray = [
    require('postcss-plugin')() // i think here you meant require('postcss-focus')() ? :))
    ];

    gulp.task('styles', function () {
    gulp.src('path/to/dev/style.css')
    .pipe(postcss(processorArray))
    .pipe(gulp.dest('path/to/prod'))
    });

    1
  13. 32

    Is there a way to remove the unused css. Considering the fact that most modern applications use templates which span multiple pages. In such a situation does this post css help in eliminating unused css

    0

↑ Back to top