Sass, Myth .... cssnext

Les pré-processeurs CSS

Depuis leurs créations les pré-processeurs ont été très critiqués et le sont toujours pour diverses raisons. On peut comparer cette bataille à celle qui oppose Vanilla JS et jQuery.

Toujours est-il que ce type d'outil est très utile et simplifie grandement l'écriture, la maintenance et l'intégration de code CSS. Il va de soi qu'il est nécessaire de maîtriser un minimum la syntaxe CSS et ses bonnes pratiques.

Il y a environ de deux ans, et suite à plusieurs tweet de @_victa et @kaelig j'ai décidé d'utiliser Sass avec le framework Compass.

Pourquoi utiliser Sass et Compass ?

Les @import :

@import "layout/body.css";
@import "layout/header.css";
@import "layout/footer.css";

Sass permet de créer plusieurs fichiers et ainsi organiser de façon plus cohérente son projet.

Les préfixes :

input.css

a:hover {
    @include transition (color .2s linear)
}

output.css

a:hover {
    -webkit-transition: color .2s linear;
        -moz-transition:color .2s linear;
            -o-transition:color .2s linear;
              transition: color .2s linear;
}

Grâce à ce mixin on obtient l'ensemble de la propriété préfixée.

La compilation et la minification.

# Environnement de production : compass compile/watch sass/index.scss -e production

if environment == :production
      output_style = :compressed
      line_comments = false
      sass_options = { :debug_info => false }      

# Environnement de developpement : compass compile/watch sass/index.scss

else
    output_style = :expanded
    sass_options = { :debug_info => true }
    line_comments    = true
end

On automatise ainsi la mise en production de ses feuilles de styles CSS.

Par la suite, j'ai été amené à créer des functions et des mixins pour "faciliter", par exemple, l'intégration des media queries https://gist.github.com/magsout/5978325.

Les erreurs

L'apprentissage de nouveaux procédés de développement rime souvent avec erreurs de débutants, à savoir des sélecteurs trop long pour coller au DOM mais aussi une utilisation abusive des @extend, ou cette volonté de tout Sassifier (function et mixin inutiles).

Ma migration vers Myth

Force est de constater que même si Sass apporte beaucoup d'avantages, sa syntaxe reste très différente de celle du CSS natif.

Il y a quelques temps j'ai testé Myth utilisant l'API Rework. J'avais été très critique à sa sortie, à tort, car l'idéologie derrière cet outil est très intéressante: utiliser du CSS moderne sans se soucier de la compatibilité des navigateurs. Voici une citation qui résume à elle seule tout l’intérêt de Myth :

Some of the features in CSS require runtime calculations, 
which neither Myth nor preprocessors handle, 
but what Myth does is let you write your code today in the future syntax, 
so that your code is future-proof. 
When browsers finally support these features you won't need to rewrite anything, 
just remove Myth and start using the cascade!

Concrètement, il est tout à fait possible d'utiliser la syntaxe des variables telle que proposée par le W3C, et ce malgré la faible compatibilité des navigateurs

input.css

:root {
    --base-link-color: #000;
    --base-link-color-hover: color(var(--base-link-color) lightness(+10%));
}
a:hover {
    color : var(--base-link-color-hover);
}

output.css

a:hover {
    color: rgb(255, 51, 51);
}

Un autre exemple relativement séduisant les : Custom media queries. Aucun navigateur ne supporte cette syntaxe actuellement, mais grâce à Myth rien ne vous empêche de l'utiliser dès aujourd’hui:

input.css

@custom-media --viewport-max-s (max-width: 30em);
@custom-media --viewport-min-s (min-width: 30.01em);

@media ( --viewport-max-s) {
    .block {
        width:50%;
    }
}

output.css

@media and (max-width:30em) {
    .block {
        width:50%;
    }
}

Grâce à l'option browser qui liste la compatibilité des navigateurs que vous voulez supporter, Myth va compiler la feuille de style.

Myth embarque Autoprefixer pour la gestion automatique des préfixes. On y retrouve également les @import et une liste impressionnante de plugins facilitant l'intégration.

Un petit nouveau

Dernièrement, j'ai également suivi le développement de cssnext. Il garde la même philosophie que Myth mais en plus avancé.

Comme on peut le voir sur cette issue https://github.com/segmentio/myth/issues/100, cssnext est plus rapide puisqu'il n'utilise qu'un moteur (postcss) et non 2 comme le fait actuellement Myth. Il corrige également certaines lacunes rencontrées avec Myth dont voici quelques exemples : https://gist.github.com/MoOx/091143e99c6c87fa6d13.

Conclusion

J'ai donc débuté depuis la semaine dernière la migration de notre boilerplate basé sur Sass et Compass vers cssnext. Pour éviter de perdre trop de temps j'ai placé l'ensemble de notre micro framework dans un répertoire legacy. Ce qui me permet de ne pas avoir à modifier tout le code sous Sass et de développer le projet avec cette nouvelle technologie.

Cela étant, et comme le dirais notre ami Benjamin Parker :

Un grand pouvoir implique de grandes responsabilités.

Tous ces outils sont puissants mais ils doivent être maîtrisés car les dérives possibles peuvent aller à l'inverse de l’objectif premier.

Quelques liens

• Compass : http://compass-style.org/
• Sass: http://sass-lang.com/
• Sass playground : sassmeister.com/
• Myth: http://www.myth.io/
• Myth playground : http://jonathankingston.github.io/mythhub/
• cssnext: http://cssnext.github.io/
• cssnext playground : https://cssnext.github.io/cssnext-playground//