Share
S'il y a une chose que vous devez vraiment savoir sur PostCSS, c'est que vous devriez apprendre ce que c'est et comment l'utiliser au plus vite.
Dans cette série, nous allons nous plonger dans PostCSS et vous expliquer toutes les manières principales de l’utiliser. Si ce dont PostCSS est capable ne vous a pas déjà ébloui, préparez-vous à un nouveau monde CSS courageux.
PostCSS gagne en popularité à une vitesse vertigineuse. De plus en plus de gens commencent à comprendre ce que cela offre, profitant de ce «moment d'ampoule» lorsqu'ils réalisent qu'ils peuvent l'utiliser uniquement dans leurs propres projets..
En 2014, il y avait un peu moins de 1,4 million de téléchargements au total pour l'année, mais de janvier à juin 2015, il y avait déjà eu plus de 3,8 millions de téléchargements..
Autoprefixer, un plugin très populaire pour PostCSS, est utilisé par Google, Shopify, Twitter, Bootstrap et CodePen. WordPress utilise également Autoprefixer, ainsi que le plugin RTLCSS. Et Alibaba utilise plusieurs plugins PostCSS, en plus de développer leurs propres projets et de contribuer à d’autres projets de plugins..
Au-delà, Mark Otto a parlé de l’écriture de Bootstrap version 5 dans PostCSS:
Oh, btw-Bootstrap 4 sera dans SCSS. Et si vous vous en souciez, v5 sera probablement dans PostCSS parce que merde sainte ça sonne bien.
- Mark Otto (@mdo) 23 avril 2015
PostCSS vient d'être intégré dans CodePen.io et peut être utilisé en ligne en le sélectionnant dans les paramètres CSS:
PostCSS sur CodePenPostCSS se développe, croît rapidement, et pour cause.
Alors, qu'est-ce que PostCSS? La meilleure définition provient de la page GitHub du projet:
“PostCSS est un outil de transformation de CSS avec les plugins JS. Ces plugins peuvent supporter des variables et des mixins, transpiler la future syntaxe CSS, les images inline, etc..
En un mot, PostCSS prend CSS et le transforme en une forme de données que JavaScript peut manipuler. Des plugins JavaScript pour PostCSS effectuent ensuite lesdites manipulations de code. PostCSS lui-même ne change pas votre CSS, il ouvre simplement la voie aux plugins pour effectuer les transformations pour lesquelles ils ont été conçus..
Il n’existe pratiquement aucune limitation quant au type de manipulation que les plug-in PostCSS peuvent appliquer à CSS. Si vous pouvez y penser, vous pouvez probablement écrire un plugin PostCSS pour y arriver..
Les plugins PostCSS peuvent se comporter comme des pré-processeurs; ils peuvent optimiser et auto-préfixer le code, ils peuvent ajouter une syntaxe future, ils peuvent effectuer le linting, ils peuvent traiter les variables et la logique, ils peuvent fournir des systèmes de grille complets, ils peuvent offrir des raccourcis de codage… la liste est longue et variée.
Le fait que vous puissiez faire à peu près tout ce que vous voulez avec les plugins PostCSS, combiné au fait que PostCSS est encore relativement nouveau, a conduit à des idées fausses sur ce qu'est réellement l'outil..
De nombreuses personnes (y compris moi-même au départ) ont eu une impression incomplète de ce que PostCSS est en réalité et ont donc soit oublié ce que PostCSS a à offrir, soit sont arrivées en retard à la table..
Donc, avant d’aller plus loin, éclaircissons quelques-unes des choses que PostCSS est ne pas.
De nombreux développeurs ont dit abandonner les pré-processeurs CSS au profit de PostCSS. Pendant ce temps, d’autres affirment que, parce qu’ils préfèrent leur préprocesseur actuel, ils n’aiment pas PostCSS. Cependant, PostCSS est ne pas un pré-processeur.
Oui, vous pouvez absolument l'utiliser comme préprocesseur si vous le souhaitez, mais vous pouvez également utiliser PostCSS sans aucune fonctionnalité semblable à celle d'un préprocesseur. Vous pouvez même continuer à utiliser votre préprocesseur préféré conjonction avec PostCSS.
PostCSS a le mot "post" dans le nom, mais ce n'est pas vraiment un "post-processeur" non plus. Le post-traitement est généralement considéré comme prenant une feuille de style finie comprenant la syntaxe CSS valide / standard et le traitant, pour faire des choses comme ajouter des préfixes de fournisseur. Cependant, PostCSS n'est pas limité à fonctionner uniquement de cette manière. Comme mentionné ci-dessus, il peut aussi se comporter comme un pré-processeur.
Il est peut-être préférable de considérer simplement PostCSS comme un «processeur». Andrey Sitnik, le créateur de PostCSS, a déclaré sur Twitter:
Il est temps d'admettre mes erreurs. Le terme «post-processeur» était mauvais. L’équipe PostCSS s’est arrêtée pour l’utiliser. https://t.co/vs2AiXGoJy
- PostCSS (@PostCSS) 28 juillet 2015
Et comme l'a décrit Maxime Thirouin, contributeur et développeur de plugins PostCSS prolifique, sur Twitter, plutôt que le «post» dans PostCSS faisant référence au traitement «post», il est préférable de penser que «CSS et au-delà».
@HugoGiraudel, plus personne dans les contributeurs postcss n'utilise plus cette expression. Maintenant c'est Postcss comme "css and beyond"
- Maxime Thirouin (@MoOx) le 21 juillet 2015
Il existe d’excellents et très connus plugins PostCSS qui vous permettent d’écrire dans la syntaxe future, c’est-à-dire en utilisant CSS qui sera disponible dans le futur mais qui n’est pas encore largement supporté. Cependant, PostCSS n’est pas inhérent à la prise en charge de la syntaxe future.
Certains développeurs ont exprimé leur réticence à utiliser PostCSS, affirmant que c'était parce qu'ils ne savaient pas être à l'aise avec l'écriture de la syntaxe future. Cependant, écrire une syntaxe future n’est qu’un des nombreux moyens d’utiliser PostCSS..
Si vous le souhaitez, vous pouvez utiliser PostCSS pour révolutionner complètement vos processus de développement sans une ligne de syntaxe future en vue..
Le succès du plug-in Autoprefixer a conduit à la perception commune de PostCSS comme étant quelque chose que vous exécutez sur votre CSS terminé pour le nettoyer et l'optimiser afin de le rendre rapide et compatible avec tous les navigateurs. C’est la perception que j’avais moi-même, jusqu’à ce que j’apprenne le grand nombre d’autres réalisations que vous pouvez réaliser avec PostCSS..
Oui, il existe de nombreux plugins fantastiques qui offrent d'excellents processus de nettoyage et d'optimisation, mais ils ne représentent qu'une fraction de ce qui est proposé..
La chose la plus convaincante à propos de PostCSS est qu’il n’est pas limité à un seul type de fonctionnalité; il représente un ensemble de fonctionnalités totalement personnalisable et configurable potentiellement illimité.
Considérez les plugins WordPress comme un parallèle. Les plugins de commerce électronique sont très populaires, mais personne ne considère WordPress comme un moteur de commerce électronique, et les avantages de WordPress ne sont pas évalués en fonction de ses plugins de commerce électronique..
Dans le cas de PostCSS, j'aime bien penser que c'est comme le pain que vous utilisez pour faire un sandwich. En soi, cela ne semble pas grand-chose, mais c'est exactement ce que cela est censé être, et cet apparent «vide» est la raison pour laquelle il a tant de potentiel. C'est la capacité pour une variété infinie de remplissages qui vous donne quelque chose d'incroyable.
Un sandwich, hierJ'ai essayé un sandwich au beurre de cacahuète et je ne l'ai pas aimé? Ce n'est absolument pas une raison pour éliminer le pain et tous les types de sandwichs pour toujours. Au lieu de cela, essayez le remplissage suivant et vous découvrirez peut-être quelque chose qui devient une nouvelle partie de votre vie quotidienne..
PostCSS est une approche totalement différente du CSS. Un contractant de Londres avec qui j'ai discuté l'a décrit comme «un couteau suisse pour la production de CSS» et c'est une description tout à fait appropriée.
Jetons un coup d'oeil à quelques-unes des choses qui rendent PostCSS si spécial.
Aussi incroyable que PostCSS soit, c'est la longue liste de plugins divers qui le fait briller. Lorsque vous lisez la liste des plugins disponibles sur la page PostCSS GitHub, vous trouverez une variété de fonctionnalités qui n’ont jamais été contenues dans un seul espace auparavant..
Il existe des plugins pour la syntaxe future, vous permettant d'utiliser des fonctions telles que les fonctions de couleur, les dégradés de coniques, les propriétés personnalisées, les sélecteurs personnalisés, les alias personnalisés pour les requêtes multimédia et bien plus encore..
Il existe des plugins de secours pour créer une syntaxe classique, comme l’ajout de replis hexadécimaux pour rgba () couleurs, l'ajout de filtres d'opacité pour IE8, la conversion des sélecteurs d'éléments psuedo pour IE8 et la génération px les replis pour rem des unités.
Plus de vingt plugins d'extension de langue sont disponibles, y compris l'ajout de mixins, de variables, de conditions, de boucles for et each, de la génération de classes de style BEM et SUIT et de plusieurs autres.
Une sélection de plug-ins de gestion des couleurs est disponible, permettant la conversion d'un format de couleur à un autre, la modification des niveaux alpha, la combinaison de couleurs, la génération de jeux de couleurs respectueuses de l'aveuglement des couleurs, pour en nommer quelques-uns..
Il existe des systèmes de grille, des outils d'optimisation, des plugins qui ajoutent des raccourcis et des raccourcis, des linters et d'autres plugins d'analyse et de reporting.
Il n'est pas possible d'exprimer pleinement la diversité sans cesse croissante de la sélection de plug-in actuelle dans quelques paragraphes, alors assurez-vous de consulter la liste par vous-même..
Le revers de la liste incroyable de plugins disponibles pour PostCSS est que vous pouvez en utiliser autant ou autant que vous le souhaitez..
Vous voulez simplement utiliser PostCSS pour rendre votre CSS plus efficace et plus convivial entre navigateurs? Chargez quelques plugins d'optimisation et vous êtes absent.
Voulez-vous utiliser PostCSS uniquement en tant que pré-processeur? Utilisez des plugins d'extension de langue à la place et vous êtes prêt.
La philosophie sous-jacente de PostCSS est la modularité du grain, dans laquelle il n’existe aucun plugin imposant qui gère plusieurs fonctions. Au lieu de cela, un plugin est créé par fonction, et à partir de là, ils peuvent être assemblés en packs de plugins avec des fonctionnalités communes..
Par exemple, vous pouvez choisir vous-même une sélection de plug-ins pour les extensions de langue et créer votre propre préprocesseur personnalisé. Ou bien, vous pouvez simplement charger le pack PreCSS qui vous donnera un accès automatique à plusieurs plugins d'extension de langue à la fois..
Quelle que soit la manière dont vous souhaitez utiliser PostCSS, vous pouvez exécuter uniquement les plug-ins dont vous avez besoin pour vos besoins spécifiques, ce qui signifie que vous n'avez pas à traîner les fonctionnalités inutilisées sous forme de poids mort..
Les tests PostCSS sont très rapides dans les tests de performance pour deux raisons principales. Le premier est le fait que vous ne devez charger que les plugins dont vous avez besoin, comme décrit ci-dessus. L'autre est qu'il fonctionne sur JavaScript.
Vous pouvez exécuter ces tests de performance pour vous-même en utilisant https://github.com/postcss/benchmark
Le résultat de l'un de ces tests de performances, analyses d'analyse, règles imbriquées, mixins, variables et mathématiques, était:
PostCSS: 36 ms Retouche: 77 ms (2,1 fois plus lente) libsass: 136 ms (3,8 fois plus lente) Moins: 160 ms (4,4 fois plus lente) Stylet: 167 ms (4,6 fois plus lente) Stylecow: 208 ms (5,7 fois plus lente) Ruby Sass: 1084 ms (30,1 fois plus lent)
Les plugins pour PostCSS sont écrits en JavaScript et, de ce fait, toute personne pouvant écrire du JavaScript peut créer un plugin à sa guise. Pour vous donner une idée, je ne me considère absolument pas comme un développeur JavaScript noyau dur, mais après avoir découvert PostCSS, j'ai pu créer mon premier plugin entièrement fonctionnel en l'espace de quelques heures..
Les projets préprocesseurs tels que Stylus, Sass et LESS font un travail formidable, mais ils ne peuvent pas plaire à tout le monde. Ils doivent choisir les fonctionnalités qui serviront le mieux leurs utilisateurs dans leur ensemble. Si vous souhaitez utiliser une fonctionnalité, vous pouvez demander une fonctionnalité, mais celle-ci peut être considérée comme étant non conforme aux besoins plus larges du projet..
Même si vous faites une demande de fonctionnalité jugée appropriée, les responsables du projet sont généralement des volontaires non rémunérés qui n'ont peut-être pas le temps de les développer. Donc, si vous n'avez pas le niveau de compétence nécessaire pour le créer, vous n'avez pas de chance.
Avec PostCSS, par contre, vous n'avez rien à demander à personne. Si vous voulez une nouvelle fonctionnalité, vous pouvez la créer. D'après mon expérience, le niveau d'expérience JavaScript requis pour créer un plug-in PostCSS serait gérable pour de nombreux développeurs front-end..
Dans un didacticiel ultérieur de cette série, nous allons créer un plug-in PostCSS de base. Même si vous ne vous considérez pas comme un expert de JavaScript, je pense que la création de plug-in PostCSS est tout à fait réalisable..
Une très grande partie des plugins PostCSS ne nécessite pas l'utilisation d'une syntaxe personnalisée, comme c'est le cas avec les pré-processeurs. Au lieu de cela, ils peuvent être appliqués aux CSS classiques. Cela signifie que vous pouvez utiliser PostCSS avec tout fichier CSS que vous possédez, tel que des feuilles de style terminées à partir d'un framework frontal, d'un projet de quelqu'un d'autre ou d'un fichier Normalize.css par exemple..
Cela signifie également que vous n'êtes pas exclu des projets utilisant un préprocesseur particulier, que ce soit Stylus, Sass ou LESS, car vous pouvez toujours appliquer PostCSS au CSS compilé. Par exemple, si vous utilisez Foundation via Sass, vous pouvez exécuter des plug-ins d'optimisation et de syntaxe future après avoir généré les fichiers CSS de votre projet..
Nous commençons également à voir des bibliothèques entières construites avec PostCSS, où auparavant elles étaient écrites en Stylus, Sass ou LESS..
Par exemple, Cory Simmons maintenait à l'origine les versions Stylus et Sass de son système de grille Lost afin que les utilisateurs des deux préprocesseurs puissent y accéder. Il a ensuite porté le projet sur PostCSS, ce qui signifie que tout le monde peut maintenant utiliser Lost, y compris les utilisateurs Stylus et Sass, mais aussi les utilisateurs MOINS et les personnes ne travaillant pas du tout avec un pré-processeur..
Étant basé sur JavaScript, PostCSS n'exige pas que Ruby soit installé, et il offre des intégrations prédéfinies pour plusieurs outils de développement..
Accentsconagua
@ règles dans votre CSSnpm installer. Cela facilite le partage des projets PostCSS, malgré le grand nombre de variations possibles dans la configuration du plugin..Nous verrons comment vous pouvez configurer l'utilisation de PostCSS dans la section «Guide de démarrage rapide» de cette série..
La première chose que vous devez savoir, c’est que le PostCSS accélère, et pour cause, le moment est venu de bien comprendre comment il peut aider vos processus de développement..
Dans cette série, nous allons commencer par vous expliquer comment commencer à utiliser PostCSS via les tutoriels:
À partir de là, nous examinerons de près différentes façons d’utiliser PostCSS dans les tutoriels:
Enfin, nous allons terminer en vous faisant traverser créer votre propre plugin PostCSS de base.
Vous remarquerez peut-être une absence flagrante de didacticiel sur l'utilisation de PostCSS pour activer les futures CSS, d'autant plus que beaucoup de gens voient les deux comme presque synonymes..
La raison de cette absence temporaire, cssnext, est le plug-in le plus important pour les CSS à venir. Elle est sur le point de subir une transformation majeure qui pourrait modifier considérablement les étapes nécessaires à son utilisation. En tant que tel, nous garderons un œil dessus et vous proposerons un nouveau tutoriel une fois le projet terminé..
Alors commençons! Dans le prochain tutoriel, nous allons entrer directement dans notre «Guide de démarrage rapide» et vous montrer les moyens les plus rapides pour commencer à utiliser PostCSS. on se verra là bas!
