10 super plugins PostCSS pour vous transformer en assistant CSS
PostCSS est un outil incroyablement polyvalent qui permet de: transformer les styles CSS avec des plugins JavaScript. Sa flexibilité réside dans la façon dont il est construit.
La partie principale de PostCSS est un module Node.js que vous pouvez installer avec npm et qui dispose d’un écosystème de plus de 200 plugins que vous pouvez choisir d’utiliser dans votre projet..
PostCSS n'est ni un préprocesseur, ni un postprocesseur, car différents plugins PostCSS peuvent appartenir à l'une ou l'autre de ces catégories. cela dépend entièrement de vous ce que vous en faites. Avec PostCSS, vous pas besoin d'apprendre une syntaxe différente comme dans le cas de Sass ou de LESS; vous pouvez immédiatement commencer à l'utiliser.
PostCSS prend votre fichier CSS existant et le transforme en données lisibles en JavaScript, puis les plugins JavaScript effectuent les modifications et PostCSS renvoie la version modifiée du fichier d'origine. Ça a l'air cool, n'est-ce pas?
Dans cet article, nous allons examiner 10 plugins PostCSS pour: vous donner un aperçu de certaines des grandes choses que vous pouvez réaliser avec cet outil génial.
1. Autopréfixeur
Préfixeur automatique est probablement le plugin PostCss le plus connu, utilisé par de grandes entreprises de haute technologie telles que Google, Twitter et Shopify. Il ajoute des préfixes de vendeurs aux règles CSS là où c'est nécessaire.
Autoprefixer utilise les données de Can I Use. De cette façon, il ne sera pas daté et pourra toujours appliquer les règles les plus récentes. Vous pouvez voir comment cela fonctionne sur son site de démonstration interactive.
2. CSSnext
CSSnext est un transpiler CSS qui vous permet d'utiliser la syntaxe CSS future sur les sites actuels. Le W3C contient de nombreuses nouvelles règles CSS qui ne sont pas implémentées actuellement par les navigateurs, mais qui pourraient permettre aux développeurs d’écrire des CSS plus sophistiquées plus rapidement et plus facilement. CSSnext a été créé pour combler cette lacune.
Il vaut la peine de jeter un coup d’œil à ses fonctionnalités pour voir ce que vous pouvez accomplir avec, par exemple, vous pouvez: utiliser des requêtes multimédia personnalisées, des sélecteurs personnalisés, des modificateurs de couleur, des filtres SVG et de nouveaux pseudoclasses dans vos dessins.
3. PreCSS
PreCSS est l'un des plugins PstCSS qui fonctionnent comme un préprocesseur CSS. Il permet de profitez d'un balisage de type Sass dans vos fichiers de feuille de style.
En introduisant PreCSS dans votre flux de travail, vous pouvez utiliser des variables, sinon des déclarations, pour boucles, mixins, @étendre et @importation règles, imbrication, et de nombreuses autres fonctionnalités utiles dans votre code CSS. La documentation Github de PreCSS vous explique en détail comment en tirer le meilleur parti..
4. StyleLint
StyleLint est un linter CSS moderne qui relire et valider votre code CSS. Il est facile d’éviter les erreurs et vous oblige à suivre des conventions de codage cohérentes..
StyleLint comprend la dernière syntaxe CSS et peut donc être utilisée avec le plugin PreCSS mentionné précédemment. Il vous permet également de créer votre propre configuration et même de vérifier si vos paramètres sont valides..
5. Actifs PostCSS
Le plugin PostCSS Assets est un outil pratique gestionnaire d'actifs pour vos fichiers CSS. Cela peut être un excellent choix si vous avez tendance à avoir des problèmes avec les chemins d’URL, car PostCSS Assets isole vos fichiers de feuille de style des modifications de l’environnement..
Vous devez définir des chemins de chargement, des chemins relatifs et un chemin de base, et le plug-in recherchera automatiquement les actifs dont vous avez besoin. Par exemple, vous pouvez écrire le code suivant si vous avez besoin de l’URL appropriée du fichier. foobar.jpg image:
body background: resol ('foobar.jpg'); Les actifs de PostCSS également prend en charge le cache des actifs, comme vous pouvez définir le cachebuster variable à true si vous souhaitez que les chemins d'URL soient automatiquement modifiés en cas de modification d'un actif. Ce plugin intelligent calcule également les dimensions (largeur et hauteur) des fichiers d’image, voire les redimensionne selon un rapport prédéfini..
6. CSSNano
Si vous avez besoin de fichiers CSS optimisés et minifiés pour un site de production, n'hésitez pas à consulter CSSNano. Il s’agit d’un plug-in modulaire composé de nombreux plug-ins PostCSS à responsabilité unique. Il n'effectue pas seulement des techniques de minification de base telles que la suppression des espaces, mais propose également des options avancées permettant des optimisations ciblées..
Parmi de nombreuses autres fonctionnalités, CSSNano est capable de redéfinir la base des valeurs d'index z, de réduire les identifiants personnalisés, de convertir les valeurs de longueur, d'heure et de couleur et de supprimer les préfixes de fournisseur obsolètes..
7. Magicien des polices
Si vous êtes un fan de typographie sophistiquée, vous aimerez sûrement le Magicien des polices PostCSS plugin. La magie de Font Magician repose sur sa capacité de générer automatiquement tout le nécessaire @ font-face règles.
Comment cela fonctionne est assez simple, il vous suffit d'ajouter le famille de polices: "My Fav Font"; Règle CSS à un élément HTML et Font Magician effectue le reste du travail. Il peut ajouter Google Fonts, la copie locale d'une police, la typographie Bootstrap, et peut également charger des polices de manière asynchrone. Voici son site de démonstration interactive.
8. Écrire en SVG
Vous êtes-vous déjà demandé à quel point il serait génial d'écrire du SVG directement dans vos fichiers CSS? Avec l'aide du plug-in Write SVG PostCSS, vous pouvez facilement atteindre cet objectif..
Ce plugin pratique, par exemple, permet de: stocker vos arrière-plans et icônes SVG dans votre fichier CSS, et ensuite ajoutez-les à l'élément HTML approprié de la manière suivante:
@svg square @rect fill: var (- color, black); largeur: 100%; hauteur: 100%; .example background: white svg (paramètre carré (- couleur # 00b1ff)) cover;
9. grille perdue
Grille perdue est un excellent plugin PostCSS qui vous offre une impressionnante Système de grille CSS ça ne fait pas que fonctionne avec CSS simple mais aussi avec langues de préprocesseur (Sass, LESS, Stylus). Il utilise le calc () Fonction CSS pour créer de superbes grilles que vous pouvez facilement utiliser sans perdre trop de temps avec la personnalisation.
Lost Grid a des règles assez simples, par exemple, définir une colonne avec une largeur de 25% ne prend pas plus que ce petit extrait de code:
div colonne perdue: 1/4;
10. Sprites PostCSS
le PostCSS Sprite plugin, il est facile de générer des sprites d'image, c'est-à-dire des collections d'images placées dans un seul fichier. Après avoir défini quelques options, le plug-in extrait les images de votre fichier de feuille de style, les fusionne dans une image-objet, puis met à jour les références d'image chaque fois que cela est nécessaire..
Vous pouvez utiliser différents filtres et différents groupeurs pour déterminer les images que vous souhaitez placer dans l'image-objet. Vous pouvez également définir les dimensions de l'image de sortie..
