Postprocesseurs CSS

Un workflow CSS efficace

Vincent De Oliveira · @iamvdo

CSS, pas un vrai langage

• Langage de description
• Simple
• Trop simple ?

La solution ?

Les préprocesseurs CSS

• Variables
• Logique conditionnelle
• Expressions, fonctions, boucles
• Mixins, extends
• Nesting
• Un vrai langage !

Pourquoi c'est le bien ?

• Automatisation
• Approche Modulaire, DRY
• Maintenance simplifiée
• Structure le CSS !

Pourquoi c'est moins bien ?

• Complexifie
• Alourdi la codebase
• (Lent)
• Autre :

Le vrai problème

• Sur-utilisation !
• On leur fait tout faire

Pas vocation à faire de l'amélioration progressive / dégradation gracieuse

• C'est le moment de réduire leur scope

Node.js

• Arrivée de Node.js
• JavaScript sur serveur
• Parfait pour le tooling

Les postprocesseurs

• Principe d'automatisation (Grunt, Gulp, Brunch, etc.)
• Renforcer l'approche DRY
• Simplifier la maintenance
• Se rapprocher du CSS basique
• Alléger les préprocesseurs !

Les postprocesseurs

Les postprocesseurs

• Deux parseurs CSS principaux :
  • CSS (Rework)
  • PostCSS
• PostCSS prend légèrement l'avance :
  • Meilleur parsing (le seul à parser browserhacks)
  • API haut niveau
  • Préserve le style de code
  • Sourcemaps
  • Vraie logique postprocesseur

Exemple 1 : Préfixes CSS

Juste avant...

Arrêtez de vouloir préfixer border-radius ou box-shadow !

Ce que l'on veut avoir :

Flexbox FTW !

.e {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

Préprocesseur

Votre CSS (en Sass, avec Compass) :

.e {
  @include flexbox((
    display: box
  ), $version: 1);
  @include flexbox((
    display: flexbox
  ), $version: 2);
  @include flexbox((
    display: flex
  ));
}

Postprocesseur

Votre CSS :

.e {
  display: flex;
}

Autoprefixer

• L'outil magique pour les préfixes CSS
• Basé sur caniuse.com
• Configurable facilement
• Plugins Grunt, Gulp, Brunch
• Postprocesseur indispensable !

Autoprefixer

var autoprefixer = require('autoprefixer-core');
var options      = {browsers:['last 5 versions', 'Firefox 8']};
var prefixed     = autoprefixer(options).process('.e { display: flex }').css;

Une petite démo

L'intérêt ?

• On utilise la syntaxe CSS (plus de mixin)
• Mises à jour simplifiées
• Aucune retouche ultérieure (code future-ready)
• Facile de ne plus appliquer le postprocesseur
• Contrairement aux préprocesseurs

Exemple 2 : opacity

Ce que l'on veut avoir :

.e {
  opacity: .5;
  filter: alpha(opacity=50);
}

Préprocesseur

Votre CSS (en Sass) :

.e {
  @include opacity(.5);
}

Préprocesseur

Mixin Sass

@mixin opacity ($value) {
  opacity: $value;
  filter: alpha(opacity=$value*100);
}

Postprocesseur

Votre CSS

.e {
  opacity: .5;
}

Postprocesseur

JavaScript

css.eachRule(function (rule) {
  rule.eachDecl(function (decl) {
    if (decl.prop === 'opacity') {
      var alpha = Math.floor(decl.value * 100);
      rule.insertAfter(decl, {prop: 'filter', value: 'alpha(opacity=' + alpha + ')'});
    }
  });
});

Exemple 3 : rem

Ce que l'on veut avoir :

.e {
  font-size: 32px;
  font-size: 2rem;
}

Préprocesseur

Votre CSS (en Sass) :

.e {
  @include rem(font-size, 2rem);
}

• Avec le bon mixin

Postprocesseur

Votre CSS :

.e {
  font-size: 2rem;
}

• Avec le bon postprocesseur

Cas avancés

• Et pour border: 1rem solid #000; avec un préprocesseur ?
• Pas forcément évident
• Mais super simple avec un postprocesseur !

Des exemples :

Basés sur PostCSS :

• Autoprefixer
• Pixrem
• Filtres CSS
• RTLCSS
• Inline les @import
• Minifier
• etc.

Tout-en-un !

• Pleeease
• Regroupe plusieurs postprocesseurs :
  • Prefixes, rem, opacity, filtres, etc.
• Et des optimiseurs :
  • Inline @import, (vraie) minification, regroupe media-queries
• Test : Pleeease Play

D'autres idées...

• Unités vm / vmin
• Vérifier :focus lors de :hover
• Mot-clé initial
• Convertir dégradés CSS en dataURI (IE9)
• etc.

Aller plus loin !

• Utiliser CSS3+
• A l'étude :
  • Custom Properties (variables CSS)
  • Couleurs Level 4
  • Custom Media-queries

• cssnext
• Pleeease.NEXT

Attention

• Peut être dangereux
• Comportement CSS natif impossible
  • Utiliser calc hors navigateur
  • Variables CSS sans connaitre le DOM
  • Spécification CSS non stabilisée
  • etc.
• Proche d'un préprocesseur, mais trop proche de CSS
• Non conseillé sur projet à long terme

Préprocesseur
+
Postprocesseur
=

♥

A vous de créer votre workflow !

Pensez module

Open-Source FTW !

Merci!

Slides: slides.iamvdo.me/blend14

Questions: @iamvdo ou IRL