L’introduction suivante aux outils de qualité de code CSS est un extrait du livre à paraître de Tiffany, CSS Master, 2e édition qui sera disponible sous peu.
En route pour devenir un maître CSS, vous aurez besoin de savoir comment dépanner et optimiser votre CSS. Comment diagnostiquez-vous et corrigez-vous les problèmes de rendu? Comment vous assurez-vous que votre CSS ne crée aucun retard de performance pour les utilisateurs finaux? Comment assurer la qualité du code?
Savoir quels outils utiliser vous aidera à garantir le bon fonctionnement de votre front-end.
Dans cet article, nous allons parler des outils permettant d’analyser la qualité de votre code CSS. Nous allons nous concentrer sur deux:
stylelint est un outil anti-peluches. A linter est une application qui vérifie le code pour détecter des problèmes potentiels, en appliquant des conventions de codage telles que des espaces au lieu de tabulations pour l'indentation. stylelint peut détecter des problèmes tels que des sélecteurs en double, des règles non valides ou une spécificité inutile. Celles-ci ont le plus grand impact sur la maintenabilité des CSS.
Par contre, UnCSS vérifie que vos CSS ne contiennent pas de sélecteurs ni de règles de style. Il analyse une feuille de style et une liste de pages HTML, renvoyant un fichier CSS dépourvu de règles inutilisées.
Ces deux outils utilisent Node.js et peuvent être installés à l'aide de npm.
Si vous travaillez sur un petit site Web, tel qu'un blog personnel ou quelques pages mises à jour rarement, de nombreux problèmes que ces outils signalent peuvent être ignorés en toute sécurité. Vous passerez du temps à refactoriser pour gagner peu en facilité de maintenance et de rapidité. Pour les projets plus importants, cependant, ils sont inestimables. Ils vous aideront à éviter les problèmes de maintenabilité avant qu’ils ne commencent.
stylelint
stylelint vous aide à éviter les erreurs et à appliquer les conventions dans vos styles. Il contient plus de 160 règles qui capturent les erreurs et vous permet de créer les vôtres également via des plugins.
Installation et configuration de stylelint
Installez stylelint comme n'importe quel autre paquet npm:
npm install -g stylelint
Une fois installé, nous devrons configurer stylelint avant de l’utiliser. stylelint n'est pas livré avec un fichier de configuration par défaut. Au lieu de cela, nous devons en créer un. Créez un fichier .stylelistrc dans votre répertoire de projet. Ce fichier contiendra nos règles de configuration, qui peuvent utiliser la syntaxe JSON (JavaScript Object Notation) ou YAML (YAML Ain’t Markup Language). Les exemples de cette section utilisent JSON.
Notre fichier .stylelistrc doit contenir un objet doté d'une propriété rules . La valeur de rules sera elle-même un objet contenant un ensemble de stylelist règles et leurs valeurs:
{
"règles": {}
}
Si, par exemple, nous voulions bannir les déclarations importantes nous pouvons définir la déclaration-pas-importante à vraie :
{
"règles": {
"declaration-no-important": true
}
}
stylelint prend en charge plus de 150 règles qui vérifient les erreurs de syntaxe, la cohérence des indentations et des sauts de ligne, les règles non valides et la spécificité des sélecteurs. Vous trouverez une liste complète des règles et de leurs valeurs disponibles dans le Guide de l'utilisateur de stylelint .
À partir d'une configuration de base de stylelint
Il sera probablement plus facile de démarrer avec une configuration de base. puis personnalisez-le selon les besoins de votre projet. La configuration de base stylelint-config-recommandée est une bonne configuration de départ. Il active toutes les règles relatives aux «erreurs possibles». Installez-le à l'aide de npm:
npm install -g stylelint-config-recommandé
Ensuite, dans votre répertoire de projet, créez un fichier .stylelistrc contenant les lignes suivantes:
{
"extend": "/ absolute / path / to / stylelint-config-recommandé"
}
Remplacez / absolute / path / to / par le répertoire dans lequel stylelint-config-recommandé a été installé. Les packages npm globaux se trouvent généralement dans le répertoire % AppData% npm node_modules sur les systèmes Windows 10 et dans / usr / local / lib / node_modules sous Unix / Linux et macOS. systèmes. Tapez npm list -g pour localiser votre répertoire global node_modules .
Nous pouvons ensuite augmenter notre configuration en ajoutant une propriété rules . Par exemple, pour interdire les préfixes de vendeurs, notre fichier .stylelistrc ressemblerait à ce qui suit:
{
"extend": "/ absolute / path / to / stylelint-config-recommandé",
"règles": {
"value-no-vendor-prefix": true
}
}
Et si nous voulions limiter la spécificité maximale de nos sélecteurs à 0,2,0 ? Cela permettrait des sélecteurs tels que .sidebar .title mais pas #footer_nav. Nous pouvons le faire en ajoutant une règle sélecteur-max-spécificité à notre configuration:
{
"extend": "/ absolute / path / to / stylelint-config-recommandé",
"règles": {
"value-no-vendor-prefix": true,
"sélecteur-max-spécificité": "0,2,0"
}
}
Utilisation de stylelint
Pour lier vos fichiers CSS à l'aide de stylelint exécutez la commande stylelint en transmettant le chemin d'accès à votre fichier CSS en tant qu'argument:
stylelint. css
Vous pouvez également insérer tous les fichiers CSS d'un même répertoire, même de manière récursive:
stylelint "./css/**/*.css"
stylelint peut également lier les feuilles de style CSS intégrées à des fichiers HTML à l’aide de l’élément style . Il suffit de passer le chemin du fichier HTML comme argument.
Une fois l'opération terminée, stylelint affiche une liste des fichiers contenant des erreurs, ainsi que leur type et leur emplacement, comme indiqué dans l'image ci-dessous.
UnCSS
UnCSS analyse vos fichiers HTML et CSS, supprimant ainsi les fichiers CSS non utilisés. Si vos projets incluent une structure CSS telle que Bootstrap ou utilisent une feuille de style de réinitialisation, envisagez d’ajouter UnCSS à votre flux de travail. Il supprimera les CSS et octets inutiles de votre code.
Installation de UnCSS
Comme avec les autres paquets npm, vous pouvez installer UnCSS à l'aide de la commande suivante:
npm install -g uncss
Utilisation de UnCSS à partir de la ligne de commande
UnCSS requiert le chemin du fichier ou l'URL d'une page HTML contenant un fichier CSS lié. Par exemple:
uncss http://sitepoint.com/
UnCSS analysera le code HTML et ses feuilles de style liées et imprimera le code CSS optimisé sur une sortie standard. Pour rediriger vers un fichier, utilisez l'opérateur de redirection (> ):
uncss http://sitepoint.com/> optimisé.css
Vous pouvez également transmettre plusieurs chemins de fichier ou URL à la ligne de commande. UnCSS analysera chaque fichier et dumpera le fichier CSS optimisé contenant des règles concernant une ou plusieurs pages:
uncss index.html article-1.html article-2.html> optimisé.css
Pour obtenir une liste complète des commandes et un exemple d'utilisation de UnCSS avec un script Node.js, consultez la documentation UnCSS.
L'exécution de ces outils semble probablement une charge de travail supplémentaire. À cette fin, pensez à ajouter un gestionnaire de tâches ou un système à votre flux de travail. Les plus populaires incluent Grunt Gulp et webpack . Tous les trois disposent d’une documentation robuste et d’une importante communauté de développeurs.
L’avantage de ces gestionnaires de tâches et systèmes de construction est qu’ils automatisent les tâches de concaténation et d’optimisation. Ils ne sont pas limités au CSS non plus. La plupart des outils de construction incluent également des plug-ins d'optimisation de JavaScript et des images.
Les fichiers de script de configuration et de construction étant généralement de type JSON et JavaScript, vous pouvez facilement les réutiliser, ou les partager avec une équipe. Chacun des outils mentionnés dans cet article peut être intégré à Grunt, Gulp ou Webpack à l'aide d'un plugin.
Cependant, adoptez avant tout une approche pragmatique pour la construction de votre boîte à outils. Ajoutez des outils qui, à votre avis, amélioreront votre flux de travail et la qualité de votre sortie.
Pour en savoir plus sur le débogage et l'optimisation CSS, consultez le livre de Tiffany, CSS Master, 2e édition .
Articles connexes:
Source link