Как я работаю с CSS: Stylus, Autoprefixer, CSSO и Grunt

Раньше я использовал Ниб для добавления CSS-префиксов в Стилусе. Но этот способ был неидеальным: Ниб добавлял кучу лишних префиксов.

Теперь я использую Автопрефиксер. Он добавляет только нужные префиксы для тех браузеров, которые вы поддерживате, используя данные caniuse.com.

Вот мой грантфайл (Gruntfile.coffee):

module.exports = (grunt) ->
  'use strict'

  require('load-grunt-tasks')(grunt)

  debug = !!grunt.option('debug')

  grunt.initConfig
    banner: '/* Author: Artem Sapegin, http://sapegin.me, <%= grunt.template.today("yyyy") %> */\n'
    stylus:
        options:
          banner: '<%= banner %>'
          define:
            DEBUG: debug
          use: [
            () -> require('autoprefixer-stylus')('last 2 versions', 'ie 8', 'ie 9')
            debug or require('csso-stylus')
          ]
        compile:
          files:
            'build/styles.css': 'styles/index.styl'
    watch:
      options:
        livereload: true
      stylus:
        files: 'styles/**'
        tasks: 'stylus'

  grunt.registerTask 'default', ['stylus']

И зависимости:

npm install --save-dev grunt load-grunt-tasks grunt-contrib-stylus grunt-contrib-watch autoprefixer-stylus csso-stylus

Я использую autoprefixer и csso в виде плагинов для Стилуса. То же самое можно было бы сделать и плагинами autoprefixer и csso для Гранта, но плагины для Гранта работают с файлами на диске, а плагины для Стилуса — с переменными в памяти. Это позволяет избежать двух лишних операций записи на диск и сильно упрощает грантфайл.

CSSO нужен, потому что Автопрефиксер не сжимает код при сохранении. А для того, чтобы код не сжимался во время отладки, используется переменная debug: просто запускаете grunt watch --debug и можно работать.