Nettoyer la base de code CSS. Réinitialisation des styles à l'aide de la réinitialisation CSS

De l'auteur : Il est assez difficile de parler de styles monolithiques, car les fichiers CSS sont généralement volumineux. La suppression des styles CSS inutilisés devrait permettre de garder les choses sous contrôle. Avant de commencer à rechercher des styles inutilisés, il convient de noter qu'il existe de nombreuses autres stratégies pour écrire des styles maintenables. Nos styles peuvent être divisés en parties logiques (mise en page, boutons, grilles, widgets, etc.) et utiliser un système de dénomination clair (par exemple, BEM). Généralement, les développeurs le font avant même de rechercher les règles inutilisées. Je pense que c’est vrai car les styles ont un impact à long terme.

Une autre raison pour laquelle les règles ne sont pas très souvent supprimées est qu'il est tout simplement peu pratique de rechercher et de supprimer des styles inutilisés dans un projet plus grand qu'un petit projet Web. Si le contenu n’est pas statique, comment savoir quelles règles sont utilisées et où ?

Outil de développement Chrome

Il s'avère que Chrome Developer Tools dispose déjà d'une fonctionnalité intégrée. Je l'ai testé sur un site dont je savais qu'il contenait de nombreux styles pouvant être supprimés. Les sentiments étaient mitigés. La barrière à l’entrée est très faible, en particulier pour les développeurs qui ont déjà travaillé avec le Chrome Developer Panel. Vous n'avez rien à installer, c'est sympa.

Ce que vous devez faire pour vérifier les styles sur le site :

Ouvrez le site qui vous intéresse

Ouvrez le panneau du développeur

Accédez à l'onglet audits

Sélectionnez l'option Performances de la page Web et exécutez

Certains résultats indiqueront « Supprimer les règles CSS inutilisées ». Si ce n’est pas le cas, vous n’avez aucun style inutilisé. Félicitations! Les résultats sont divisés par style. La répartition ne se fait pas uniquement par fichiers, mais par blocs de style. Une fonction vraiment utile, puisque nous n'avons besoin que des styles que nous avons écrits. Du moins aux fins de cet article.

Est-ce bon ?

Je n'ai pas trouvé de moyen très simple d'exporter le résultat depuis Chrome. Vous pouvez copier directement à partir d'un bloc, mais vous devez d'abord le développer. Cela rend l’analyse des résultats un peu délicate. Exécuter le test dans le navigateur nous éloigne encore plus du travail avec le code, ce qui peut nous amener à oublier de tester le site.

Conclusion : utile pour commencer, mais pas une solution à long terme.

UnCSS

Vous pouvez utiliser des outils de ligne de commande pour rechercher les styles inutilisés. UnCSS est un exemple intéressant. Il extrait la page via phantomJS et récupère les styles insérés via JS. Je voulais vraiment essayer cet outil car il résolvait mon problème, car la barre d'outils de développement Chrome ne concerne pas du tout l'édition de code. Avec UnCSS, le résultat peut être enregistré directement dans un fichier, parfait.

Installation

Je n'ai pas pu exécuter npm install uncss sur Ubuntu. Rien de grave, il s'avère que j'ai oublié quelques dépendances. Commandes pour installer les bibliothèques manquantes que j'ai exécutées :

sudo apt-get update sudo apt-get install build-essential chrpath libssl-dev libxft-dev sudo apt-get install libfreetype6 libfreetype6-dev sudo apt-get install libfontconfig1 libfontconfig1-dev

sudo apt - obtenir la mise à jour sudo apt - get install build - essentiel chrpath libssl - dev libxft - dev sudo apt - get install libfreetype6 libfreetype6 - dev sudo apt - get install libfontconfig1 libfontconfig1 - dev

UnCSS peut être intégré au processus de construction, mais nous l'ignorerons pour l'instant. Je pense que ce n'est pas une bonne idée de l'insérer dans le processus de construction. Addy Osmani a un bon article sur ce sujet. Idéalement, nous souhaiterions supprimer les styles inutilisés directement du code, plutôt que de simplement les filtrer pour le produit final.

La meilleure solution est peut-être de faire les deux. Tout d’abord, exécutez-le comme étape de pré-construction pour optimiser le code. Deuxièmement, exécutez une étape de génération pour optimiser les styles que vous ne contrôlez pas.

Utilisation de la ligne de commande

uncss http://votre-site.foo/ > styles-unutilisés.css

déconnecter http : //votre-site.foo/ > styles-inutilisés.css

Le résultat est réparti entre les styles de navigateur your-site.com et Chrome, mais est stocké dans un seul fichier. Mon site a une police géniale et toutes les icônes qui ne sont pas utilisées sur la page d'accueil se sont retrouvées dans la sortie UnCSS. Cela ne m'importe plus maintenant. Ils peuvent être masqués en exécutant à nouveau la commande et en spécifiant ignoreSheets.

Notez que ignoreSheets peut accepter une chaîne (l'URL complète du style à ignorer) ou une expression régulière. Une expression régulière est plus simple car elle contient moins de caractères et couvre les modifications possibles dans le chemin du fichier.

Ignorer les feuilles /.*font-awesome.min.css/

Il s'agit du message d'erreur qui apparaît lorsque la page expire. Le délai d'attente peut être augmenté en utilisant -t N, où N est le nombre de millisecondes (ne définissez pas –t 360 et demandez-vous ensuite pourquoi le code n'a pas attendu 5 minutes).

Conclusion : UnCSS est plus pratique car il est plus proche de l'endroit où j'édite les styles. Le fichier de sortie est utile pour éliminer les styles inutiles. Je vois son utilisation en raison de l'option –includeSheets, qui ignore automatiquement tout ce qui relève de l'expression régulière. Pratique pour, par exemple, les sites WordPress, où divers plugins peuvent ajuster leurs styles, mais le développeur n'a besoin que de styles de thème style.css, etc.

Quel outil dois-je utiliser ?

Au début, j'ai choisi UnCSS et la ligne de commande pratique. Cependant, pendant que j’écrivais cet article, je les ai essayés sur quelques autres sites et j’ai obtenu des résultats moins prometteurs. En particulier, j'ai plusieurs sites créés il y a quelques années qui utilisent un framework où sont impliqués des commentaires permanents /*!*…*/. Ils ne fonctionnent pas bien avec PostCSS, et donc pas bien avec UnCSS. Je n'ai pas encore approfondi le problème, mais peut-être qu'une version plus récente de PostCSS pardonne davantage de commentaires comme celui-ci. Cependant, à l'heure actuelle, cela est devenu un autre obstacle et je ne peux pas utiliser pleinement UnCSS dans mon travail.

Salutations à tous les lecteurs de l'article actuel, ainsi qu'aux abonnés à mon blog éducatif. Vous avez probablement rencontré plus d'une fois un problème lorsque le balisage de style est parfaitement réalisé, mais malgré cela, les pages sont légèrement différentes. Pour éviter que cela ne se produise, je vais vous expliquer ce qu'est le nettoyage des styles CSS.

Après avoir lu cette publication, vous apprendrez l'histoire de cette technologie, analyserez plusieurs types de nettoyage de style, et pourrez également consolider vos nouvelles connaissances en analysant des exemples de code. Passons maintenant aux choses sérieuses !

Comment la technologie CSS Reset est apparue et comment l'utiliser

Réinitialisation CSS est une liste de propriétés de feuilles de style en cascade qui réinitialisent les paramètres par défaut du navigateur.

Cette technique vous permet de créer un service Web universel qui aura le même aspect quoi qu'il arrive et vous aidera à vous débarrasser des styles inutilisés.

Aujourd'hui, il existe de nombreuses options pour implémenter des bibliothèques de réinitialisation, ou elles peuvent également être appelées frameworks.

Je pense que tout développeur d'applications Web qui se respecte devrait disposer d'un cadre de réinitialisation personnalisé. Il peut s'agir de l'un des fichiers prêts à l'emploi, ou peut-être de votre propre fichier de réinitialisation créé personnellement.

Quant à l’histoire, une technologie similaire a été utilisée pour la première fois par Crespanis Andrew en 2004. Dans ses publications techniques, il conseillait aux maquettistes d'utiliser un sélecteur universel au début d'un document avec des styles, c'est-à-dire *, et dans celui-ci, réinitialisez les retraits d'objets définis par défaut dans chaque navigateur.

L'implémentation logicielle de cette technique ressemble à ceci :

Un exemple du fonctionnement de l'approche d'E. Crespanis

Si vous exécutez l'exemple, vous pouvez voir que le bloc est situé près du coin supérieur gauche.

Comme je l'ai déjà dit, il existe de nombreuses solutions pour réinitialiser les feuilles de style en cascade écrites dans les navigateurs. J'ai déjà décrit la première méthode ci-dessus. Il existe deux options de réinitialisation plus simples qui diffèrent de la solution de Crespanis uniquement par quelques propriétés supplémentaires.

Ainsi, l'une des approches utilise une remise à zéro supplémentaire de toutes les limites des objets Web (en ajoutant la ligne bordure : 0 ;), et dans l'autre - réinitialisation des paramètres des bordures et du contour externe des éléments (ajouté à la première option contour : 0 ; bordure : 0 ;).

Cependant, ils présentent tous un certain nombre d’inconvénients. Puisqu’il s’agit des toutes premières versions du contrôle de style du navigateur, elles ne sont pas parfaites. Prenez même un texte avec des paragraphes. Lors de la première implémentation de la réinitialisation, les retraits entre les paragraphes disparaîtront. Dans ce cas, le balisage CSS devra être ajusté à chaque fois.

Par conséquent, de nombreux gourous du Web et professionnels de l’informatique ont continué à améliorer cette nouvelle direction. Ainsi, Eric Meyer a fait quelques recherches, étudié de nombreux ouvrages écrits à cette époque et créé un outil puissant appelé CSS Reset.

Soigneusement! Mafia du Web ! Va tuer n’importe quel standard de style de navigateur !

Alors qu’avons-nous avec CSS Reset ? Cette solution n'utilise pas de sélecteur universel, mais définit le balisage de style via des balises. Dans le même temps, le code prévoit le traitement des zones « problématiques » telles que, par exemple, l'effondrement des bordures, qui ne fonctionne pas bien dans certains navigateurs.

Je voudrais noter un détail important : la réinitialisation du balisage de style doit être effectuée avant de définir d'autres propriétés, car CSS traite les règles de style dans l'ordre et écrase les valeurs des paramètres spécifiés plusieurs fois pour les mêmes balises.

Revenons à Eric Meyer et son CSS Reset. Dans sa solution, il prescrit des règles pour presque tous les éléments du langage CSS, des conteneurs aux petites balises telles que strong, var, mark et autres. Voici la deuxième version officielle de ce document : http://meyerweb.com/eric/tools/css/reset/index.html

Après l'apparition de l'option décrite ci-dessus pour ajuster la conception du site « taille unique » dans tous les navigateurs, de nombreuses grandes entreprises ont créé leurs propres modifications.

Par exemple, Yahoo! a créé une réinitialisation CSS YUI, qu'ils ont mise à disposition gratuitement (vous pouvez la consulter sur ce lien : http://yui.github.io/yui2/#start).

Chris Poteet et des personnes partageant les mêmes idées ont développé la réinitialisation du navigateur CSS de Siolon ( http://www.siolon.com/blog/browser-reset-css/). Et cela pourrait durer très longtemps.

Ici, je souhaite énumérer quelques règles et directives importantes pour l'utilisation de CSS Reset :

1. Comme je l'ai déjà dit, la première chose qui devrait fonctionner dans le code CSS est de réinitialiser les paramètres. Bien que cela soit intuitif, très souvent les développeurs débutants et expérimentés tombent sur cette erreur ;
2. Il est considéré comme une bonne pratique d'utiliser un document CSS distinct pour la réinitialisation CSS. De plus, un tel fichier devient un outil de développement universel et peut être utilisé dans divers projets Web ;
3. N'ayez pas peur de mettre en œuvre des modifications personnelles ou de créer vos propres cadres de réinitialisation ;
4. Essayez de ne pas utiliser aveuglément des solutions toutes faites pour réinitialiser les styles, puis redéfinir certains paramètres. Cela menace la redondance du code. Et les informaticiens n’aiment pas ça. Par conséquent, dans le cas de Yahoo CSS Reset, si vous avez besoin d'un alignement au centre et non à gauche dans ces propriétés : caption, th (text-align : left ;), alors n'hésitez pas à écrire le mot-clé center.

Pour ma part, j'utilise mon CSS Reset, qui comprend les règles générales de base du modèle et mes ajustements.

Ceci conclut l’article. Je vous serais reconnaissant si vous appréciez mon travail et si vous rejoignez également les rangs de mes abonnés. N'oubliez pas de partager le lien vers mon blog avec vos amis et collègues. Bonne chance!

Au revoir!

Cordialement, Roman Chueshov

Lire: 114 fois

Bonjour, chers lecteurs du site blog. Ceci est une petite note de la série « comme souvenir ». L'idée est née de supprimer les lignes supplémentaires du fichier de styles. Au cours des sept années d'existence du blog, beaucoup de choses ont changé, mais les lignes du fichier STYLE.CSS sont restées (juste au cas où, ou j'aurais simplement oublié de les supprimer). Maintenant, il m'a semblé qu'il commençait à peser trop, et c'est pourquoi l'idée est née de le nettoyer.

Faire cela manuellement est assez difficile et ce n’est pas nécessaire. Il existe des moyens d'automatiser ce processus. Certains d’entre eux ne fonctionnaient pas pour moi, d’autres devaient être payés et je considérais cela comme inutile. En fin de compte, j'ai utilisé une méthode semi-automatique, dont je parlerai dans les prochains paragraphes. Pour l'avenir, je dirai que nous avons réussi à réduire la taille du fichier CSS de près de moitié, ce qui m'a même un peu surpris.

Options pour trouver les styles CSS inutiles pour le site Web

Le remplacement du fichier de styles (son contenu - j'ai supprimé l'ancien et inséré le nouveau, après quoi j'ai enregistré les modifications via Filezilla) par un nouveau (endommagé) n'a provoqué aucun changement visible sur le site (pas encore, du moins , non révélé). Dans l’ensemble, je suis très satisfait et recommande de l’essayer. Rapide, simple et pratique (et également gratuit).

Bonne chance à vous ! A bientôt sur les pages du site blog

Vous pouvez regarder plus de vidéos en allant sur

");">

Vous pourriez être intéressé

Comment maximiser la vitesse de chargement du site Web et optimiser la charge du serveur
CSS - qu'est-ce que c'est, comment les feuilles de style en cascade sont connectées au code HTML à l'aide de Style et Link
Optimisation et compression CSS dans Page Speed ​​​​- comment désactiver les fichiers de feuille de style externes et les fusionner en un seul pour accélérer le chargement Comment configurer la couleur d'arrière-plan alternée des lignes de tableaux, listes et autres éléments HTML du site à l'aide de la pseudo-classe nième enfant
A quoi sert CSS, comment connecter des feuilles de style en cascade à un document HTML et la syntaxe de base de ce langage
Style de liste (type, image, position) - Règles CSS pour personnaliser l'apparence des listes en code Html
Comment obtenir un site Web rapide - optimisation (compression) des images et des scripts, ainsi que réduction du nombre de requêtes Http

Les avantages d’un CSS propre et organisé sont évidents. Un site Web avec un CSS impeccable se chargera plus rapidement et sera plus visible dans les résultats de recherche. Pour les développeurs Web, un code CSS propre est un signe clair de professionnalisme envers les futurs clients.

Mais nettoyer les débris de balisage CSS à travers d’innombrables itérations et modifications de conception peut être un processus fastidieux et long effectué à la main. Heureusement, il existe des outils formidables et utiles qui peuvent vous aider à automatiser certains des aspects les plus pertinents du CSS. Sur cette page se trouvent des liens vers des outils de nettoyage CSS. J'ai personnellement vérifié le balisage CSS du site à l'aide de tous les outils ci-dessous, et je vous conseille de faire de même.

Outils de nettoyage CSS

ProCSSor pour améliorer votre CSS

ProCSSor est un outil simple et sans fioritures pour améliorer instantanément votre CSS. Disponible via OS X, iOS ou n'importe quel navigateur, l'outil prend le fichier CSS, l'extrait collé ou l'URL, puis corrige et affiche immédiatement le futur code de votre CSS.

Charpie CSS

Outil de vérification CSS avec explication des modifications

CSS Lint propose des recommandations, contrairement aux autres outils de nettoyage CSS. La plupart d'entre eux ne parlent même pas des modifications CSS, mais CSS Lint donne une brève explication pour chacune des modifications recommandées. Il dispose d'une gamme de fonctionnalités axées sur les bogues, la compatibilité, les performances, la déduplication et l'accessibilité qui peuvent être activées ou désactivées.

Balisage sale

L'outil Dirty Markup combine plusieurs technologies différentes

Dirty Markup a une approche unique de l'optimisation du code ; il fonctionne lorsque le champ est rempli de code et combine plusieurs technologies différentes : HTML Tidy, JavaScript, Ace Editor et effectue un nettoyage complet du code. Cela fonctionne comme CSS, tout comme JavaScript ou HTML standard.

NettoyerCSS

L'outil CleanCSS effectue l'optimisation CSS

CleanCSS fonctionne avec une URL ou un morceau de code inséré et offre une variété d'exécutions d'optimisation CSS. Vous pouvez choisir entre cinq paramètres de compression différents qui offrent des compromis entre la lisibilité et la taille du fichier.

Embellisseur de code

Outil de nettoyage CSS simple Code Beautifier

Code Beautifier est un simple outil de nettoyage CSS sans aucune fonctionnalité inutile. Il traite le code par URL ou par insertion de code et le nettoie en profondeur sur la base d'une variété d'options pratiques. Si vous avez besoin de nettoyer rapidement votre CSS sans vous perdre dans une mer d'options de nettoyage de code, cela pourrait être votre outil de nettoyage CSS idéal.

Mappeur de sprites

Spritemapper génère des sprites, combine plusieurs images dans une feuille de style CSS

Aucun des autres outils ne mentionne des images optimisées, ce qui est tout aussi utile que l'optimisation du code lui-même. Spritemapper génère des sprites, combine plusieurs images dans une feuille de style CSS avec un positionnement correct. Le résultat est un site plus rapide, moins de requêtes HTTP et un style CSS plus rationalisé.

Manteau

Topcoat n'est pas un outil de nettoyage CSS traditionnel

Topcoat n'est pas un outil de nettoyage CSS traditionnel ; il s'agit essentiellement d'un kit de développement CSS, d'une pure approche de curation CSS. Si vous disposez d'un CSS bien écrit, vous n'aurez probablement jamais besoin de nettoyer le code CSS.

L'outil CSSTidy fonctionne sur les plateformes Windows, Mac ou Linux.

CSSTidy est similaire à de nombreux outils de nettoyage CSS, mais celui-ci offre des attributs uniques. CSSTidy peut être invoqué à l'aide de la ligne de commande ou de PHP et s'exécute sur les plates-formes Windows, Mac ou Linux. L'outil de nettoyage CSSTidy peut s'intégrer parfaitement à votre flux de travail existant et garder votre CSS propre hors ligne. Outil de validation du code CSS W3C Valdiator

W3C Valdiator ne propose pas d'outils pour nettoyer, compresser ou optimiser le code, mais cela doit absolument être envisagé dans les cas où le code CSS est vraiment cassé. Les outils ci-dessus ont leurs propres outils, celui-ci est réalisé par le Consortium W3C qui crée des standards.

Vous venez de rejoindre un projet existant pour remplacer un développeur partant. Ou peut-être ont-ils simplement repris leur ancien projet après quelques années. Vous ressentez de l'horreur et du dégoût en regardant le code. Il n'y a qu'une chose que vous puissiez faire : nettoyer tout ce désordre. Avez-vous déjà rencontré quelque chose de similaire ? Il est presque certain que tôt ou tard, tout le monde en fera l’expérience.

Vous savez que nettoyer le code CSS est une tâche ardue. Il y a beaucoup à faire dans un laps de temps limité, surtout lorsque les clients/patrons/collègues vous disent avec insistance de ne pas toucher à ce qui fonctionne. Vous ne savez même pas par où commencer.

Le peluchage est tout pour nous

Dans cette section, je suppose que vous utilisez Sass. Non seulement parce qu’il s’agit d’une hypothèse raisonnable dans l’environnement actuel, mais aussi parce qu’une mauvaise utilisation de Sass est souvent à l’origine d’une contamination de la base de code. Bien que cet article soit utile à ceux qui n'utilisent pas de préprocesseurs, vous devriez donc le lire jusqu'au bout.

La première chose que j'ai l'habitude de faire lorsque j'ai besoin de comprendre une base de code est le peluchage. Le linting est le processus d'exécution d'un programme pour rechercher des erreurs potentielles et de mauvaises pratiques. Je crois qu'en rendant le code propre, nous faisons le premier pas vers un bon code. L'étymologie du mot linting peut être trouvée dans ce fil de discussion sur StackOverflow.

Sass a un linter écrit en Ruby appelé SCSS-lint. Vous pouvez le configurer vous-même ou télécharger la configuration recommandée par Sass-Guidelines pour commencer immédiatement. Node.js a également sass-lint, ils ne sont pas compatibles à 100 % et peuvent fonctionner différemment.

Essayez d'exécuter SCSS-Lint sur votre répertoire de fichiers Sass pour rechercher les erreurs. Il y a de fortes chances qu’une tonne d’erreurs vous incombe. Habituellement, après cela, vous souhaitez arrêter d’expérimenter le nettoyage de code. Sois patient. A ce stade, vous pouvez essayer de rendre la configuration moins contraignante concernant des règles qui ne sont pas très importantes pour vous (comme le format des couleurs) ou prendre le taureau par les cornes et utiliser toute la puissance du peluchage.

Correction des erreurs trouvées

Il est temps de réparer ce qui doit l'être. Cela peut être fait de deux manières. La première consiste à vérifier tous les fichiers un par un et à corriger toutes les erreurs et défauts tels qu'une dénomination de variable infructueuse, une imbrication excessive des sélecteurs et un code mal formaté. La seconde (ma préférée) consiste à utiliser la recherche et le remplacement. Je ne sais pas pour vous, mais j'adore les expressions régulières et j'aime toujours les utiliser dans mon travail.

Supposons que vous souhaitiez ajouter un zéro manquant dans tous les nombres à virgule flottante (c'est-à-dire de 0 à 1), ces types d'erreurs sont détectés à l'aide de la règle LeadingZero dans SCSS-lint. Pour ce faire, utilisez l'expression régulière \s+\.(\d+) pour la recherche (tous les nombres suivant un espace avec un point) et pour le remplacement \0.$1 (espace, zéro, point et le nombre trouvé). Et si vous êtes préoccupé par la règle linter BorderZero, vous pouvez remplacer toutes les règles border: none par border: 0 dans votre éditeur en utilisant rechercher/remplacer. Rien de plus simple !

J'ai récemment créé le référentiel scss-lint-regex sur GitHub pour collecter toutes les expressions régulières pour le peluchage en un seul endroit. Jetez-y un coup d'œil si vous rencontrez des problèmes avec le peluchage dans un grand projet. Et soyez prudent avec la fonction Rechercher/Remplacer, cela peut parfois avoir des effets secondaires inattendus. Après chaque modification, exécutez un git diff pour identifier ce qui a changé, cela garantira que vous n'ajoutez pas de bugs à votre code.

Une fois que vous aurez terminé l'édition par recherche/remplacement, vous ne pourrez plus éviter l'édition manuelle aux endroits qui doivent être améliorés (indentation incorrecte, lignes vides manquantes ou trop nombreuses, espaces manquants, etc.). Cela prend beaucoup de temps, mais cela vous aidera beaucoup lors de la prochaine étape, il est donc important de le faire avant de passer à autre chose.

Note du traducteur

Certaines de ces choses peuvent être effectuées à l'aide des plugins SassBeautify dans des éditeurs de texte comme sublime ou atom.

Revue de la structure du projet

Ce qui me dérange vraiment beaucoup lorsque je rejoins un projet existant, c'est le manque d'architecture de projet appropriée. Peut-être qu'il y avait une sorte de projet au tout début des travaux, mais avec le temps, les choses deviennent incontrôlables et le plan initial est perdu. Mais cela reste extrêmement important.

Le choix de la méthodologie du projet n'est pas si important, l'essentiel est que vous l'ayez et ne vous gêne pas. Il peut s'agir de SMACSS, 7-1 ou ITCSS - à vous de choisir. Essayez de restructurer votre code selon la méthodologie choisie. J'ai tendance à utiliser le modèle 7-1 que nous avons développé dans les directives Sass, je vais donc vous donner quelques conseils pour vous aider si vous choisissez cette voie.

Passons ensuite au répertoire des résumés. Toutes les variables, mixins, fonctions et espaces réservés doivent être placés ici. Vous êtes libre de les organiser comme vous le souhaitez jusqu'à ce que vous compreniez toutes les variables et mixins de votre base de code. J'identifie également les variables facultatives (et les mixins) à ce stade, car je rencontre souvent des variables utilisées une ou deux fois.

Une fois que vous aurez compris cela, vous devrez décider laquelle des deux prochaines étapes prendre en premier. Vous pouvez essayer de vous assurer que tout le contenu du répertoire de base est véritablement des styles de base et non des styles de composants. Ou vérifiez que le répertoire de mise en page contient tout ce qui concerne la mise en page et que ce code est correctement documenté.

Enfin, pour terminer le tout, vous devez créer le répertoire des composants, ce qui est généralement une tâche gigantesque. Je conseille de fabriquer des composants aussi petits que possible et de se concentrer sur leur réutilisation. Peu importe si vous en augmentez le nombre, à condition qu'ils soient sans contexte et faciles à lire, à comprendre et à mettre à jour.

À titre d'exemple de composant correct et petit, je peux donner ce qui suit :

Citation ( remplissage : 10px ; .quote__attribution ( taille de police : 80 % ; ) .quote > :premier-enfant ( marge-haut : 0 ; ) .quote > :dernier-enfant ( marge-bas : 0; )

Essayez de penser par modules. Moins. Plus facile. Plus indépendant.

Supprimer les inutiles

Je pense que la plus grande différence entre un mauvais et un bon CSS est la quantité de code. CSS est très facile à développer. Certaines personnes peuvent réaliser presque toutes les mises en page par essais et erreurs. La capacité de faire quoi que ce soit en utilisant un minimum de CSS demande du travail, et maintenir une approche minimaliste est un véritable défi.

Cela fait déjà 3 ans, mais ce tweet de Nicholas Gallagher reste ma question CSS préférée :

La dépréciation est le véritable fléau du CSS. Lorsque nous écrivons des styles, nous faisons souvent des allers-retours, essayant de nouvelles règles - nous finissons généralement par laisser quelques déclarations complètement inutiles. Par exemple, overflow: Hidden , qui n'est plus nécessaire, ou font-size , qui ne modifie pas la taille de la police. En les quittant, on augmente la dette technique. Il n’y a rien de bon à cela.

Lors de l'écriture de CSS, j'ai l'habitude d'ouvrir les outils de développement dans le navigateur et de désactiver chaque déclaration CSS une par une avant de soumettre le code terminé pour tester ce qu'elles affectent. S’ils n’affectent rien, alors la première chose que je me demande est : « Pourquoi sont-ils ici ? S'ils s'avèrent inutiles, je les supprime. Avec une technique simple comme celle-ci, je peux m'assurer que seul le code utile et aucun courrier indésirable sont soumis au référentiel.

Nettoyer la base de code CSS est la même technique. Identifiez le composant que vous souhaitez nettoyer, ouvrez les outils de développement et essayez de trouver les déclarations inutiles. Parfois, pour supprimer le code CSS, nous devons déplacer ces styles vers le haut de l'arborescence pour profiter des fonctionnalités en cascade. Regardons cela avec l'exemple simple suivant :

Parent ( /* ...trucs ici... */ ) .child-A ( couleur : rouge ; ) .child-B ( couleur : rouge ; )

L'optimisation évidente consiste à déplacer la déclaration color: red dans le sélecteur parent, puis à laisser la cascade faire le reste pour nous. Bien sûr, les exemples réels sont généralement plus complexes, mais cet exemple montre qu'il ne faut pas oublier les capacités du « C » dans l'abréviation CSS.

CSS est intelligent et vous devriez l'être tout autant

Il est également très courant de ne pas comprendre la signification de l'héritage, de l'initiale et de la couleur actuelle. Supposons que vous souhaitiez que les liens soient de la même couleur que le texte principal (ils sont déjà suffisamment soulignés). Voici comment ne pas le faire :

A ( couleur : noir ; /* Non */ )

La raison pour laquelle cette solution échoue est évidente : si vous modifiez la couleur du corps, la couleur du lien ne sera pas synchronisée avec elle. Si vous envisagez d’utiliser une variable, cela ne fera que compliquer inutilement les choses. Et enfin, si le lien est placé à l'intérieur d'un élément avec son propre style (par exemple dans une citation), il ne correspondra pas à la couleur de celui-ci.

CSS a un moyen intégré pour résoudre ce problème, la valeur d'héritage :

A ( couleur : hériter ; /* Ouais ! */ )

De même, lors du retour d'une propriété à sa valeur par défaut, ce n'est pas une bonne idée de définir la valeur sur une valeur fixe. En CSS, il existe une valeur initiale pour de tels cas. Habituellement, cela n'est pas différent de la définition de valeurs fixes, mais il existe des cas où cela joue un rôle, par exemple lors de la détermination de la direction du texte dans la propriété text-align. Lors de la réinitialisation de text-align , la valeur left peut corrompre le texte dans les langages RTL (de droite à gauche), la sortie sera initiale (c'est encore mieux start , mais cette valeur n'est pas prise en charge dans IE9)/.

La dernière valeur sur la liste, mais non la moins importante, est currentcolor , de nombreux développeurs ne la connaissent pas. Si vous en faites partie, ne vous inquiétez pas, demandez-vous simplement : « Si vous n'avez pas défini la couleur de la bordure des éléments, alors pourquoi correspond-elle automatiquement à la couleur de la police de l'élément ? Oui, cela se produit car par défaut la propriété border-color est définie sur currentcolor (spécification). D'accord, tout est évident d'après le nom.

À mon avis, si vous souhaitez utiliser la couleur de police d'un élément, vous devez utiliser currentcolor au lieu d'une valeur fixe ou d'une variable Sass.

Element ( couleur : deeppink ; bordure : 1px solide ; /* La couleur est implicite avec `currentcolor` */ ) .element svg ( fill : currentcolor ; /* La couleur de remplissage sera la même que celle du texte */ )

Ce sont toutes des fonctionnalités CSS de base. Ils créent le CSS tel qu'il est. Et ces opportunités sont étonnamment rarement utilisées. Par conséquent, si vous décidez d’améliorer le code des composants, vous ne devez pas les négliger.

Votre Git devrait aller bien

Refactoriser une base de code CSS demande beaucoup de travail. Vous devrez mettre à jour des dizaines de fichiers. Et il est probable que vous cassiez quelque chose au cours du processus. Soyons honnêtes : tout le monde fait des erreurs et ce serait incroyablement cool si vous parveniez à terminer un tel travail sans petite erreur.

Par conséquent, je vous recommande fortement de travailler avec diligence avec votre système de contrôle de version (il est logique de supposer que Git joue ce rôle). Cela signifie que tous les commits font une seule chose : assurez-vous de revenir en arrière du code contenant le bogue sans souffrir de conflits.

Je sais que beaucoup de gens trouvent Git complexe et difficile à comprendre, et les moyens de l'apprendre facilement dépassent le cadre de cet article. Croyez-moi : votre historique Git devrait être comme un poème si vous ne voulez pas que votre cerveau s'épuise.

Conclusion

Je vais donc formuler brièvement les principaux points de l'article pour ceux qui ont la flemme de lire l'intégralité du texte :

Nettoyer un projet CSS/Sass est difficile car il est difficile d'évaluer immédiatement le plein impact de la modification ou de la suppression d'une ligne CSS. Tout cela est principalement dû à la mauvaise testabilité du CSS. Il faut donc être prudent.

Commencez par le peluchage et votre code deviendra plus joli. Faites-le parce que cela vous facilitera la vie à l’avenir. C'est aussi un bon moyen de revoir l'état de votre code sans prendre trop de risques (réparer la boue syntaxique ne devrait poser aucun problème).

Structurez ensuite votre projet selon la méthodologie choisie. Peu importe celui que vous choisissez, il est important que vous le suiviez. Si votre projet ne comporte pas trop de composants, la structuration est un bon début. Recherchez des parties réutilisables de l'interface et déplacez leurs styles dans des fichiers séparés. N'hésitez pas à rédiger de la documentation, cela facilitera le processus et vous aurez l'impression d'avancer.

Une fois que vous avez nettoyé votre projet et trié tous les composants, il est temps d'améliorer le CSS. Vérifiez d’abord ce que vous pouvez supprimer, car nous écrivons toujours trop de code. Essayez ensuite de l'optimiser pour qu'il soit moins répétitif. N'en faites pas trop ! Votre travail consiste à réduire la complexité, pas à l'augmenter. N'oubliez pas de commenter tout ce qui n'est pas évident au premier abord.

Et enfin, vos commits doivent être réguliers et logiques. Combinez les modifications en petits commits, dont chacun fait une chose simple - cela facilitera l'annulation des modifications si vous faites quelque chose de mal.

Enfin et surtout, n'oubliez pas de célébrer quand tout sera fini. Bonne chance!