PostCSS est un outil qui a rapidement émergé comme l’avenir de préprocesseurs existants tels que SASS et Less, principalement en raison de sa puissance, la rapidité et la facilité d’utilisation. PostCSS facilite l’intégration des styles de pointe dans votre page web et en même temps vous aide à maintenir la performance et la maintenabilité de votre code.
Un élément clé de tout site Web est le design. Un site web est pas un site sans couleur et action. Construire des styles pour une présence en ligne prend du temps et d’efforts. Nous pouvons réduire le temps de développement en utilisant un préprocesseur pour automatiser la création de styles, appliquer automatiquement les préfixes, les vendors (des fournisseurs), etc., mais l’injection de dépendances supplémentaire d’une bibliothèque peut s’avérer une affaire délicate!
PostCSS comporte un style unique et modulaire qui nous permet de créer un processeur CSS plus maigre, plus rapide, sans dépendances externes (site officiel).
Découvrir l’art du CSS processing avec PostCSS
Question : qu’est-ce que SASS, Stylus, Haml et moins ont tous en commun? La réponse est, ils sont tous les compilateurs, une source à la compilation, ou transpilers (pour donner leur nom officiel), qui ont été autour depuis 1980. Ils sont apparus dans de nombreux formats différents, avec XLT86 de Digital Research étant l’une des premières versions, datant de 1981.
Plus récemment, le processeur SASS bien connu est arrivé en 2006; cela a été suivi par LESS, créé par Alexis Sellier en 2009. Les deux fonctionnent de la même façon: ils prennent un ensemble de règles pour compiler en CSS valide. Nous pouvons étendre CSS avec toutes sortes de fonctionnalités, telles que variables, mixins, les fonctions, et plus encore. Bien que les processeurs ne peuvent pas aider à réduire le nombre physique de lignes que nous avons à écrire, ils nous aident à réorganiser le code en blocs plus faciles à gérer que nous pouvons réutiliser dans les futurs projets. Cela contribue à rendre le code CSS plus facile à maintenir.
Mais, comme il est presque toujours le cas, il y a quelques inconvénients à l’utilisation des processeurs :
- il y a presque toujours une dépendance impliquée, sous une forme ou une autre-avec SASS, (c’est Ruby); si vous utilisez LESS, c’est une bibliothèque, même si elle est écrite en JavaScript ;
- notre projet ne peut utiliser qu’une petite quantité de code prétraité, pourtant, nous sommes obligés de compter sur ce qui peut être une grande bibliothèque, comme SASS ;
- le traitement des feuilles de style en utilisant un préprocesseur est lent ; il peut durer quelques secondes, mais cela s’accumule au fil du temps pour devenir un processus important.
Présentation de PostCSS
PostCSS est utilisé par des grandes entreprises, telles que Twitter, Google, Bootstrap et CodePen, et même WordPress.
PostCSS fut développé comme un module Node.js, donc fonctionnera parfaitement un certain nombre de plugins existants déjà disponibles pour Node.js. Prenons un moment pour explorer quelques-uns des avantages de cet outil.