Préprocesseurs CSS et remote editing

Quelles solutions ?

Romain SAUGERChef de projet WEB MEDIAPILOTE - Laval

Sommaire

● Que sont les préprocesseurs CSS ?● Comment intégrer les préprocesseurs CSS à son workflow

en Remote Editing ?

Que sont les préprocesseurs CSS ?

Les préprocesseurs CSS

● Ce sont des outils permettant de transformer un langage (avec une syntaxe semblable à CSS), en CSS valide.

● Les deux préprocesseurs les plus utilisés sont Sass et Less. ● Les préprocesseurs apportent une aide à l’écriture de vos

feuilles de styles (Gain de temps : DRY)

A lire sur humancoders.com : Les idées reçues sur les préprocesseurs CSS (Sass, Less…)

Encore trop peu utilisés

1. Nouvelle syntaxe à apprendre2. La résistance au changement3. Workflow inadapté

Une nouvelle syntaxe

Ce dont on dispose en plus (par rapport aux CSS)

● Variables● Mixins● Règles imbriquées (Nested rules)● Calcul (Operation)● Portée (Scope)● Conditions (Conditional Statement)

VariablesLess Sass

Mixins

Règles imbriquées (Nested rules)Less Sass

Calcul (Operation)

Portée (Scope)

Conditions (Conditional Statement)

Sources

http://www.hongkiat.com/blog/less-basic/http://www.hongkiat.com/blog/getting-started-saas/

Less VS Sass, lequel choisir ?

● Réponse courte : Sass● Réponse légèrement plus longue : Sass est meilleur par bien

des aspects, mais si vous êtes content de Less, pas de problème, c’est déjà une très bonne chose d’utiliser un préprocesseur.

● Réponse détaillée (EN) : https://css-tricks.com/sass-vs-less/

Constat

Malgré toutes leurs qualités, les préprocesseurs peinent parfois à s’imposer en production, pour 2 raisons* :● Résistance au changement ● Workflow inadapté : le remote editing

*d’après une étude empirique sur un panel pas représentatif, mais que je côtoie :)

Le résistance au changement

Ce qu’il faudrait (au moins) éviter :● Des outils propres à un seul OS● Imposer un nouvel éditeur de texte● Être obligé d’utiliser les lignes de commande

Ce qui n’est parfois pas négociable : le remote editing

le Remote editing, mais pourquoi au juste ?

● Une seule version à maintenir ● Pas de maintenance d’un serveur local.● Immédiateté des interventions en prod.

MAIS AUSSI : il est parfois impossible d’installer une version locale du site pour des raisons technique et de licence.

Workflow “full remote”

● Editeur de texte λ associé à Transmit, WinSCP ou Filezilla.● Dreamweaver, Coda & notepad ++ : gestionnaire de site et

FTP intégré.

Incompatible avec des outils de préprocessing “en local”Solution : installer le préprocesseur sur le serveur, compilation à la demande : LessPHP ou Sass si le serveur le permet…

Workflow “half remote”

On travail sur une copie locale, mais on upload les fichiers modifié après chaque sauvegarde.● Sublime Text + Package SFTP● Dreamweaver et son gestionnaire FTP intégré● Editeur de texte λ + Task runner (Grunt, Gulp)

Solution idéale mais incomplête selon l’éditeur : Recours à un preprocesseur externe

Workflow half remote

Fichier locauxLiberté du choix de préprocesseur

Comment gérer l’upload lors de la sauvegarde ?

Comment intégrer les préprocesseurs à son workflow

en remote editing ?Surtout si en plus c’est sur du mutualisé,

donc sans librairies exotiques sur le serveur…

Prérequis

● Les fichiers devront être présent en local.● Il faut trouver un moyen d’envoyer sur le FTP les fichiers

compilés (CSS) aussitôt après qu’ils aient été généré.

Cahier des charges (anti-résistance au changement)

● Pas d’OS Spécifique● Pas de ligne de commande● Pas de nouvel éditeur● Pas de nouveau workflow

Solution n°1Sublime Text + Packages

Sublime Text + Packages

Node.js + Less + Package Lessc

et aussi l’installation des preprocesseurs

Ruby puis les gem Sass, Compass, Susy, etc.

et aussi l’installation des preprocesseurs

Sublime Text + Package SFTP

Avantages : Solution multi OS Workflow presque sans faille.Sublime Text

Sublime Text + Package SFTP

Inconvénients : ● Pas mal de chose à installer, dont parfois en ligne de

commande.● Et si j’aime pas Sublime Text ?

Solution n°2Editeur de texte λ + Task runner (Grunt, Gulp)

Editeur de texte λ + Task runner (Grunt, Gulp)

Avantage : Liberté du choix de l’éditeur (même Dreamweaver !)Accès à tout un tas de fonctionnalités complémentaires, dont :● Compression● Concaténation● Upload FTP

Editeur de texte λ + Task runner (Grunt, Gulp)

Inconvénients :● Courbe d’apprentissage importante● Ligne de commande là encore quasi indispensable● Upload FTP “Build & save” moins stable que ST + SFTP

Editeur de texte λ + Task runner (Grunt, Gulp)

Solution n°3Les outils “tout en un”

Livereload Codekit

MixturePrepros

Les Outils “tout en un”

Livereload

Support très completPas de gestion FTP

Codekit

Mac OS uniquementSupport ultra completPas de gestion FTP

Mixture

Support ultra completPas d’upload FTP “on save”

● Win & Mac● Liberté de choix d’éditeur de texte● Richesse des bibliothèques :

o CSS : LESS, SASS, Styluso HTML : jade, haml, slim, markdown, kito JS : Coffeescript, Livescript

● FTP intégré : o Build & Upload on saveo File filters

Prepros

Conclusion

Conclusion

Ne (presque) rien changer : Prepros + n’importe quel editeur

Si déjà sous Sublime Text : pas besoin de task runners : package Less, Sass et SFTP.

Ouverture

Les fichiers sont de retour en local… …et si on se mettait à Git ?

2 OS utilisés à égalité

2 vieux outils encore très utilisés

Merci de votre attention

romain.sauger@gmail.com