Le CSS peut être difficile à gérer, en particulier pour tout site de taille raisonnable. Obtenez un coup de main avec ce préprocesseur.

Disons que vous découvrez une fonctionnalité CSS vraiment cool, comme l'imbrication. Mais quand vous allez de l'avant et que vous l'essayez, vous réalisez que le support est terrible et qu'il vous faudra des années avant de pouvoir enfin l'utiliser. C'était un énorme problème dans CSS jusqu'à l'introduction de préprocesseurs comme PostCSS.

Découvrez comment PostCSS vous permet d'utiliser le CSS moderne et futur dès aujourd'hui pendant le développement. Vous découvrirez exactement ce qu'est PostCSS, comment vous pouvez l'utiliser et la meilleure façon de tirer parti de ses fonctionnalités.

Configuration du projet

Accédez à un dossier vide, créez un fichier nommé index.html et ajoutez le balisage HTML suivant dans le fichier :

html>
<htmllangue="fr">
<diriger>
<lienrel="feuille de style"href="src/styles.css">
diriger>


<corps>
<p>Paragraphep>
<div>Divisiondiv>
corps>
html>
instagram viewer

Ce document HTML affiche un paragraphe et élément. Il importe également un fichier de feuille de style nommé styles.css c'est à l'intérieur du src dossier. Créez le fichier dans le src dossier et incluez les règles de style CSS suivantes :

corpsp {
couleur: orange;
}
corpsdiv {
couleur: bleu;
}
corps {
afficher: grille;
}

Ce CSS stylise la couleur des deux éléments sur la page et crée une mise en page en grille. La plupart des navigateurs prennent en charge la syntaxe CSS normale comme celle-ci. Mais lorsque vous aurez en vue une nouvelle syntaxe, vous devrez apporter PostCSS.

Créer un projet Node.js et installer PostCSS

En termes simples, PostCSS vous permet de convertir le CSS moderne en quelque chose que la plupart des navigateurs peuvent comprendre; un processus communément appelé transpiling. C'est parfait si vous voulez essayer des propriétés CSS nouvelles, expérimentales ou non standard dans votre code que les principaux navigateurs peuvent ne pas prendre en charge.

PostCSS propose également un riche écosystème de plugins JavaScript que vous pouvez installer pour activer certaines fonctionnalités, telles que la minification CSS, la prise en charge des couleurs et la prise en charge des peluches.

Pour utiliser PostCSS, la première chose à faire est d'initialiser un nouveau projet Node.js :

npm init -y

Cette commande générera un fichier package.json contenant les valeurs par défaut de votre application.

Ensuite, installez PostCSS et la CLI PostCSS. Le deuxième package vous permet d'exécuter PostCSS depuis la ligne de commande :

npm i --save-dev postcss postcss-cli

Le --save-dev flag installe les deux paquets npm en tant que dépendances de développement; vous n'utiliserez PostCSS et ses plugins que pour traiter le code CSS pendant le développement.

Pour commencer à utiliser PostCSS via le interface de ligne de commande, allez dans votre package.json fichier et créer le simple construire: css commande pour transpiler avec PostCSS :

"scénarios": {
"construire: css": "postcss src/styles.css --dir destination -w"
}

Cette commande prendra votre CSS nu (stocké dans src/styles.css), tranpilez le code, puis affichez-le dans le destination dossier. Exécution de la construction npm: css La commande crée ce dossier et le remplit avec le styles.css fichier contenant du code lisible par le navigateur.

Lorsque vous importez votre CSS dans le HTML, assurez-vous d'importer depuis le dossier de destination où vous compilez votre CSS, et non le dossier source à partir duquel PostCSS compile. C'est, dans notre cas, la distance dossier, pas le src dossier.

Si vous ouvrez votre site Web dans un navigateur, vous verrez que le site accède toujours au CSS. Chaque fois que vous apportez des modifications au fichier source, PostCSS recompilera le code et les modifications seront reflétées sur la page Web.

Utilisation des plugins PostCSS

Il y a des centaines de Plugins PostCSS pour ajouter des préfixes, des peluches, une nouvelle prise en charge de la syntaxe et des dizaines d'autres fonctionnalités à PostCSS. Après avoir installé un plugin PostCSS, vous l'activez dans le postcss.config.js file — un fichier JavaScript que vous pouvez utiliser pour mettre en place toutes les configurations pour PostCSS.

Installez le cssnano Plugin PostCSS avec la commande suivante :

npm i --save-dev cssnano

Encore une fois, il vous suffit de sauvegarder ces dépendances en tant que dépendances de développement. La raison en est que tout cela se produit au fur et à mesure que vous vous développez. Vous n'avez pas besoin de PostCSS ou de l'un de ses plugins après avoir poussé le site en production.

Pour utiliser le plugin cssnano nouvellement installé, vous devez ajouter le code suivant dans le postcss.config.js déposer:

constante cssnano = exiger("cssnano")
module.exports = {
 plugins: [
 cssnano({
 prédéfini: 'par défaut'
 })
 ]
}

Maintenant, si vous revenez au terminal et relancez la commande de construction, cela réduira le CSS de sortie (c'est-à-dire rendre le code aussi petit que possible). Ainsi, lorsque vous accédez à un site prêt pour la production, votre CSS sera aussi petit que possible.

Utiliser des fonctionnalités modernes comme l'imbrication

Supposons que vous souhaitiez utiliser la syntaxe d'imbrication dans votre feuille de style, vous remplacez donc le bloc de paragraphe dans src/styles.css avec ça:

corps {
 & p {
couleur: orange;
 }
}

Ce code est le même que la version de votre code de démarrage. Mais cela générera une erreur car la syntaxe est très nouvelle et la plupart des navigateurs Web ne la prennent pas en charge. Vous pouvez activer la prise en charge de cette syntaxe avec PostCSS en installant le postcss-preset-env brancher.

Le plugin compile un tas de plugins différents pour gérer le CSS en fonction de son stade. L'étape 0 représente les fonctionnalités super expérimentales qui peuvent même ne pas être intégrées au CSS. Alors que l'étape 4 concerne les fonctionnalités de langage qui font déjà partie de la spécification CSS.

Par défaut, env-présent utilise les fonctionnalités de l'étape 2 (qui sont les plus susceptibles d'être intégrées au CSS). Mais vous pouvez changer l'étape en ce que vous voulez dans le fichier de configuration.

Pour installer le plug-in, exécutez la commande suivante :

npm i --save-dev postcss-preset-env

Puis dans votre postcss.config.js fichier, vous devez importer le plugin et l'enregistrer :

constante cssnano = exiger("cssnano")
constante postcssPresetEnv = exiger("postcss-preset-env")
module.exports = {
 plugins: [
 cssnano({
 prédéfini: 'par défaut'
 }),
 postcssPresetEnv({ organiser: 1})
 ]
}

Vous ne devez passer que l'étape du nouveau code CSS que vous avez l'intention d'utiliser. Dans ce cas, nous supposons que la fonctionnalité d'imbrication est à l'étape 1. Lorsque vous réexécutez la commande de construction et vérifiez le navigateur, vous verrez qu'il a compilé le code imbriqué en CSS standard que le navigateur peut comprendre.

Utilisation de PostCSS avec des frameworks

La configuration manuelle de PostCSS peut être un peu pénible. C'est pourquoi presque tous les frameworks modernes sont livrés avec des outils de regroupement (par exemple, Vite, Snowpack et Parcel), et ces outils prendront en charge PostCSS intégré. Et même s'ils ne le font pas, le processus d'ajout de la prise en charge de PostCSS est incroyablement simple.

Rappelez-vous toujours que Vite et la plupart des autres bundlers utilisent Système de modules ES6, pas CommonJS. Pour contourner ce problème, vous devez utiliser le importer déclaration à la place de exiger() dans ton postcssconfig.js déposer:

importer cssnano depuis"cssnano"
// Le code de configuration va ici

Tant que les plugins sont installés, tout fonctionnera parfaitement.

En savoir plus sur SaSS

PostCSS n'est que l'un des dizaines de préprocesseurs CSS actuellement disponibles. L'un d'eux est SaSS, qui signifie feuilles de style syntaxiquement impressionnantes.

Apprendre à utiliser un autre préprocesseur majeur peut être utile en tant que développeur CSS.