SASS est très populaire et est l'un des préprocesseurs CSS les plus connus et les plus utilisés. Cependant, il est toujours pertinent de remettre en question nos connaissances et de s'ouvrir aux alternatives disponibles sur le marché. Voici pourquoi nous proposons une analyse comparative entre SASS et POSTCSS afin de faire le point sur les meilleures technologies à adopter.
Commençons par le début ! Afin de pouvoir faire la comparaison, commençons d’abord par définir les concepts.
Qu’est ce que c’est que SASS?
SASS est un langage permettant d’écrire plus facilement du CSS. Le SASS contient plusieurs éléments permettants de faciliter et d’accélérer l’écriture du CSS sans avoir à trop se répéter. Par exemple, les variables qui évitent à avoir à spécifier de multiples fois du code (ex: font-family qui se répète à multiples endroits), ou encore les extends pour les sections qui sont similaires. Le SASS est un langage solide, mature et est l’un des pré-processeurs CSS des plus utilisés. Pour en savoir plus sur le sass, voir cet article.
Qu’est ce que c’est que POSTCSS?
PostCSS est un outil conçu en Javascript qui permet de lire un fichier CSS écrit avec une syntaxe différente puis, de le convertir en vrai CSS. Tout comme SASS, il sert à rendre l’écriture du CSS plus rapide, plus facile et plus modulaire. Cependant, contrairement à SASS qui fait déjà tout, POSTCSS, à lui seul, ne fait rien. En fait, POSTCSS est inclus avec plusieurs plugins que l’on peut installer. En d’autres termes, on peut considérer que c’est un peu comme un SASS DIY !
Tout comme SASS, POSTCSS fonctionne avec :
- Gulp
- Webpack
- Grunt
- Etc…
Quelles sont les principales différences?
La principale différence entre les deux technologies est que, contrairement à SASS, POSTCSS nous offre plus de flexibilité. En effet, il est possible de le personnaliser avec les nombreux plugins disponibles. Il est également possible d’en créer de nouveaux facilement.
Toutefois, puisque POSTCSS peut être personnalisé, bon nombre de projets peuvent être conçu différemment. Or, cela rends la courbe d'apprentissage de POSTCSS plus lente pour les développeurs et, par conséquent, le set up des projets peut être plus complexe.
Quels sont les avantages de POSTCSS?
Le principal avantage de POSTCSS est qu’il a la particularité d’être personnalisable à 100%. Cela offre plus de contrôle sur l’outil. Aussi, puisque le développeur choisit manuellement ses fonctionnalités et qu’il doit les intégrer lui-même, celui-ci sait comment bien s’en servir. En revanche, en ce qui concerne SASS, si le développeur comprend mal les fonctionnalités, le CSS généré peut être non optimisé et répétitif (ex: mauvaise utilisation des mixins).
Quels sont les désavantages de POSTCSS?
Malheureusement, avec tout ces plugins, la maintenance devient plus complexe. Les plugins mis en place dépendent d’un tiers parti, il y a donc des chances qu’un jour, ceux-ci ne soient plus maintenus / supportés. À noter aussi qu’il y a une possibilité de conflit entre plugins et que certains d’entre eux doivent respecter un ordre spécifique lorsqu’ils sont ajoutés au projet. Toutefois, cet ordre, ainsi que les conflits, seront détaillés dans la documentation des plugins.
Exemples de plugins de POSTCSS
Comme mentionné ci-haut, il existe des plugins POSTCSS pour chacune des fonctionnalités SASS. Cependant, ils ne sont pas inclus par défaut. Il faut donc les installer manuellement.
Voici quelques exemples:
- Autoprefixer, ajoute les prefix pour compatibilité = -webkit- ou -o ou -moz- : https://github.com/postcss/autoprefixer
- Clean, minify le CSS: https://github.com/leodido/postcss-clean
- Cleaner, supprime le CSS inutilisé: https://github.com/tbekaert/postcss-cleaner
- Hocus: https://github.com/kilian/postcss-hocus
- Russian stylesheet: https://github.com/Semigradsky/postcss-russian-stylesheets
- Vous pouvez également consulter la liste complète des plugins ici : https://www.postcss.parts/
Mais finalement, lequel devrait-on choisir?
Évidemment, comme toutes les technologies, chaque alternative a des avantages et des inconvénients. Il suffit de voir de quelle manière nous voulons agrémenter l’expérience des développeurs dans l’écriture du CSS, le temps que nous pouvons allouer pour faire de la maintenance, l’expertise des développeurs qui seront mandaté sur les projets, etc. Dans le cas de SASS et POSTCSS, les deux ont sensiblement la même utilité. À ce stade, il s’agit donc d’une question de goût.
Encore des hésitations?
Saviez-vous que POSTCSS et SASS peuvent être utilisés en même temps sur un même projet? Vous pouvez donc continuer à utiliser SASS, tout en prenant le meilleur de POSTCSS !