Post et pré-traitement CSS

Bonjour lecteur. Sur le chemin de l'apprentissage des mises en page, avez-vous appris le CSS et souhaitez-vous passer à autre chose? Alors à toi sous chat. Attention, beaucoup de code.

Dans cet article, je passerai en revue les préprocesseurs et les postprocesseurs (s?).

Je n'entrerai pas dans les détails sur CSS, ce qui implique que vous le connaissez déjà. Je nommerai les classes en notation BEM . De plus, je ne m'attarderai pas sur l'installation et la configuration de tout ce que j'écrirai, mais je laisserai néanmoins des liens que vous pourrez suivre et apprendre à le faire vous-même.

Commençons par les préprocesseurs.

Préprocesseurs

Qu'est-ce qu'un préprocesseur hors contexte avec CSS? Vicki connaît la réponse.

Qu'est-ce qu'un préprocesseur dans le contexte de CSS? Dans notre cas, le préprocesseur est un programme qui reçoit du code écrit dans la langue du préprocesseur pour l'entrée, et à la sortie nous obtenons du CSS que nous pouvons donner à notre navigateur.

Quels sont les préprocesseurs? Il y a plusieurs représentants, par exemple: Sass (.sass, .scss), Less (.less) et Stylys (.stylus).
Parmi les préprocesseurs, PostCSS (ou plutôt son analyseur SugarSS et son plugin PreCSS) peuvent être distingués séparément. Pour l'avenir, je dirai que oui, PostCSS n'est pas seulement un post-processeur.

Je ferai un examen sur l'exemple de Sass. Plus précisément, sur sa nouvelle syntaxe - SCSS, car elle est plus proche de CSS que de l'ancienne syntaxe. Commençons par les capacités ajoutées par les préprocesseurs qui ne sont pas en CSS et terminons par les problèmes en cours de résolution.

Les possibilités

Variables

//style.scss $color: #fff; span { color: $color; background: $color; } //style.css span { color: #fff; background: #fff; } 

L'utilité des variables est difficile à surestimer. Maintenant, vous pouvez donner des noms significatifs aux couleurs ($ tomato: rgb (255,99,71)), calculer des valeurs non pas à travers des constantes, mais à travers des variables (hauteur: $ body_height - $ footer_height) et bien plus encore. Beaucoup peuvent affirmer qu'il existe des variables dans CSS. Mais Can I Use dit qu'il n'y a pas de support pour IE (et pour des raisons évidentes, ce n'est pas prévu).

Imbrication

 //style.scss .chat-area { width: 40%; &__button { // & -    (   & = .chat-area) display: inline-block; height:36px; width: 10px; } a { color: red; } } //style.css .chat-area { width: 40%; } .chat-area__button { display: inline-block; height:36px; width: 10px; } .chat-area a { color: red; } 

Au début de l'article, j'ai fait référence à BEM. Dans cet exemple, l'élément avec la classe de zone de conversation est un bloc. Dans le cas où il y a un besoin soudain de le renommer, il sera maintenant possible de le faire au même endroit, et cela devient une routine si plusieurs dizaines de sélecteurs sont tapés dans un fichier contenant le nom du bloc. Je veux également noter qu'il s'agit d'une sorte de protection contre les fautes de frappe, car le nom du bloc est écrit une fois.

Mixins

 //style.scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } //style.css .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } 

Les mixins sont l'un des sujets les plus difficiles à comprendre. En gros, un mixin est une fonction qui prend des arguments et applique des règles qui dépendent de ces arguments à un sélecteur donné. Dans cet exemple, le mixage border-radius a été appliqué au sélecteur .box

Fonctions supplémentaires

 //style.scss $color: #202020; h1, h2 { color: lighten($color, 40%); } //style.css h1, h2 { color: #868686; } 

Fondamentalement, les nouvelles fonctionnalités facilitent le travail avec la couleur. Par exemple, la fonction éclaircir - éclaircit la couleur du nombre spécifié de pour cent (l'opposé est la fonction assombrir).

Problèmes résolus

Modularité

Le problème avec l' importation standard est qu'elle crée une demande supplémentaire au serveur, ce qui est une opération coûteuse. Ce serait bien si l' importation insérait immédiatement tout le texte de l'import dans le fichier source, non?

D'une manière ou d'une autre, il n'y avait pas de préprocesseurs auparavant et le problème devait être résolu d'une manière ou d'une autre. Par exemple, vous pouvez écrire tout le code dans un fichier.


Cependant, nous avons des préprocesseurs et ils vont résoudre ce problème pour nous. Le préprocesseur remplace l' importation standard et maintenant au lieu de demander le serveur, il insère l'importation dans le fichier source, comme je le voulais.

 //style.scss @import "selector1"; @import "selector2"; //selector1.scss span { color: white; } //selector2.scss div { color: gold; } //style.css div { color: gold; } span { color: white; } 

Veuillez noter que les fichiers source ont été convertis en un seul. Une demande au serveur pour la statique - une réponse.

Héritage

<sarcasm> Nous avons des classes, mais pas d'héritage, comment ça? </sarcasm>. Il est maintenant possible de sélectionner les soi-disant «sélecteurs de modèles» et de les étendre avec d'autres sélecteurs.

 // style.scss %equal-heights { //   height: 100%; } %message { //   padding: 10px; } .success { @extend %message; color: green; } .error { @extend %message; color: red; } // style.css .success, .error { padding: 10px; } .success { color: green; } .error { color: red; } 

La beauté des sélecteurs de modèles est qu'ils ne correspondent pas aux styles générés. L'égaliseur de modèle% égal-hauteur n'était pas impliqué dans le code et n'a laissé aucune trace dans CSS. Le message selector% s'est reflété sous la forme de règles pour les sélecteurs qui l'ont développé. Vous pouvez hériter des sélecteurs ordinaires, mais il est préférable d’utiliser des sélecteurs de modèles afin qu’il n’y ait pas de déchets excessifs.

Formatage

Une fois le code écrit, il doit être formaté (compressé pour la production). Vous pouvez le faire avec l'aide de collectionneurs comme webpack, ou vous pouvez utiliser des outils standard.

Il existe 4 types de formatage dans Sass.

 //expanded span { color: gold; display: block; } div { color: red; } //nested span { color: gold; display: block; } div { color: red; } //compact span { color: gold; display: block; } div { color: red; } //compressed span{color:gold;display:block}div{color:red} 

étendu - Le plus similaire au code écrit par l'homme.
imbriqué - Approximatif au format de l'ancienne syntaxe. La lisibilité n'est pas perdue, mais c'est un problème hollywoodien.
compact - Maintient toujours la lisibilité, mais avec difficulté. Utile pour déterminer à l'oeil nu le nombre de sélecteurs d'un projet.
compressé - Format déjà complètement illisible. Tous les caractères pouvant être supprimés sont supprimés. Convient pour alimenter le navigateur.

Postscript

Je n'ai pas compris certaines des fonctionnalités ajoutées par Sass. Par exemple, des boucles ou des caractéristiques d'opérateurs arithmétiques . Je vous les laisserai vous familiariser.

Post-processeurs

Après avoir traité des préprocesseurs, nous passons aux postprocesseurs.

Dans le contexte de Css, le postprocesseur est essentiellement le même que le préprocesseur, mais l'entrée dans le postprocesseur ne reçoit pas de code écrit dans le langage du préprocesseur, mais également css. Autrement dit, le postprocesseur est un programme à l'entrée duquel css est donné, et la sortie est css. Il n'est pas très clair pourquoi cela est nécessaire.

J'expliquerai sur un exemple concret du fonctionnement de PostCSS - le seul représentant des post-processeurs dans le contexte du CSS.

PostCSS prêt à l'emploi ne fait vraiment rien avec CSS. Il retourne simplement le fichier qui lui a été donné en entrée. Les changements commencent lorsque les plugins sont connectés à PostCSS.

Le cycle complet de PostCSS peut être décrit comme suit:

• Le fichier source est donné à l'entrée PostCSS et analysé.
• Le plugin 1 fait quelque chose
• ...
• Le plugin n fait quelque chose
• Le résultat est converti en chaîne et écrit dans le fichier de sortie.

Considérez les principaux plugins qui existent dans l'écosystème PostCSS

Plugins

Autoprefixer

Ce plugin est si populaire que beaucoup de gens pensent qu'ils utilisent ce plugin mais n'utilisent pas PostCSS. Ils ont tort.

 //in.css div { display: flex } //out.css div { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } 

Le préfixe automatique ajoute des préfixes de navigateur à vos règles. L'un des plugins les plus importants qui a commencé l'histoire de PostCSS avec rien de remplaçable. Vous pourriez même dire qu'il est logique de mettre PostCss juste pour le plaisir de ce plugin.

Preset env

 //in.css @custom-media --med (width <= 50rem); @media (--med) { a:hover { color: color-mod(black alpha(54%)); } } //out.css @media (max-width: 50rem) { a:hover { color: rgba(0, 0, 0, 0.54); } } 

PostCSS Preset Env ajoute des fonctionnalités qui ne sont discutées que dans les versions préliminaires des développeurs CSS. Dans cet exemple, la directive @ custom-media a été implémentée, ainsi que la fonction color-mod. Commencez à utiliser le CSS du futur dès aujourd'hui!

Modules CSS

Tous ces BEM ne sont pas pour vous, mais y a-t-il toujours un problème avec les conflits de nom de classe? PostCSS propose alors une solution différente.

 //in.css .name { color: gray; } //out.css .Logo__name__SVK0g { color: gray; } 

Les modules CSS modifient les noms de classe selon un certain modèle (tout est personnalisable). Maintenant, nous ne connaissons pas à l'avance le nom de la classe, car il est déterminé dynamiquement. Comment classer maintenant les éléments si on ne les connaît pas à l'avance? En combinant PostCSS, Webpack et ES6, je peux offrir cette solution:

 import './style.css'; //  import styles from './style.css'; //  

Maintenant, nous importons non seulement un fichier avec des styles (par exemple, dans le fichier React d'un composant) et nous substituons des valeurs que nous connaissions auparavant, mais nous importons un objet. Les clés de cet objet seront les sélecteurs d'origine et les valeurs seront converties. Autrement dit, dans cet exemple, styles ['name'] = 'Logo__name__SVK0g'.

Court

 //in.css .icon { size: 48px; } .canvas { color: #abccfc #212231; } //out.css .icon { width: 48px; height: 48px; } .canvas { color: #abccfc; background-color: #212231; } 

PostCSS Short ajoute un tas d'entrées raccourcies pour diverses règles. Le code se raccourcit et il y a donc moins de place pour les erreurs. Plus augmente la lisibilité.

Réinitialisation automatique

 //in.css div { margin: 10px; } a { color: blue; } //out.css div, a { all: initial; } div { margin: 10px; } a { color: blue; } 

PostCSS Auto Reset nous permet de ne pas créer de fichier séparé avec une réinitialisation de tous les styles. Le plugin crée un grand sélecteur pour tous les sélecteurs, où il place les règles, réinitialisant tous les styles. Par défaut, seule la règle all est créée avec la valeur initiale. Ceci est utile en combinaison avec le plugin postcss-initial , qui à son tour transforme cette règle en un sac de règles pour 4 écrans. Cependant, tout peut être configuré et réinitialisé par exemple comme ceci:

 //out.css div, a { margin: 0; padding: 0; } div { margin: 10px; } a { color: blue; } 

Rappelez-vous au début de l'article, j'ai dit que PostCSS n'est pas seulement un post-processeur?

PostCSS - préprocesseur?

Considérez un analyseur et un plugin, après quoi vous changerez votre opinion actuelle sur PostCSS.

Sugararss

 //in.sss .parent color: white .parent > .child color: black //out.css .parent { color: white } .parent > .child { color: black } 

SugarSS est un analyseur (pas un plugin!), Qui est basé sur l' indentation , et non sur les accolades, en standard. Il a une extension séparée ".sss". Le code écrit à l'aide de SugarSS est similaire dans le style à l'ancienne syntaxe Sass, mais sans ses lotions comme les variables, les mixins, l'héritage, etc.

Vous avez deviné ce que le prochain plugin va ajouter?

Precss

 //in.sss $color: black .parent .child color: $color //  SugarSS $color: black; .parent { .child { color: $color } } //out.css .parent .child { color: black } 

PreCSS ajoute simplement les capacités mêmes des préprocesseurs qui sont décrites dans la première moitié de l'article.

Et pourquoi PostCSS n'est-il pas un préprocesseur maintenant?

Stylelint

Beaucoup a déjà été écrit sur Stylelint . Il est entré dans cette revue car il utilise PostCSS comme analyseur de lignes de fichiers CSS. Supposons que nous ayons un tel fichier.

 a { color: rgb(1, 1, 1) } div { color: rgb(0, 0, 0) } 

Voici sa sortie pour le fichier actuel:

  2:21 Expected a trailing semicolon declaration-block-trailing-semicolon 6:21 Expected a trailing semicolon declaration-block-trailing-semicolon 7:1 Unexpected missing end-of-source newline no-missing-end-of-source-newline 

L'utilité de cet outil est assez difficile à surestimer.

Conclusions

Les préprocesseurs ajoutent beaucoup de nouvelles fonctionnalités qui ne sont pas en CSS. Une fois que vous l'essayez, vous ne reviendrez guère au CSS standard.

PostCSS est beaucoup plus proche du CSS d'origine que les préprocesseurs, mais néanmoins, avec certains plugins connectés, il peut avoir la même fonctionnalité (et même une syntaxe similaire). Les compositeurs débutants peuvent composer sans même penser que les mises en page ne sont pas en CSS pur. Certains plugins (par exemple Autoprefixer) n'ont pas d'analogues dans le monde du préprocesseur.

Personne ne prend la peine d'utiliser des préprocesseurs et PostCSS conjointement. L'option est assez bonne pour les projets qui utilisent déjà des préprocesseurs et ont un lieu de vie.

Pour les nouveaux projets, je recommanderais d'utiliser uniquement PostCSS. Les concepteurs de mise en page sont habitués à la syntaxe du préprocesseur? Installez le plugin PreCSS et l'analyseur SugarSS. Besoin d'une compatibilité multi-navigateur? Installez le plugin Autoprefixer. La compatibilité entre navigateurs n'est plus nécessaire (par exemple, votre projet a été enveloppé dans un électron et il est devenu un ordinateur de bureau)? Désinstallez simplement Autoprefixer! Avec PostCSS, vous pouvez, comme avec le constructeur, construire exactement ce dont votre projet a besoin.