S’il y a bien une chose que tous les concepteurs Web doivent faire c’est garder leur code clean ! C’est d’autant plus vrai dès lors qu’il s’agit d’un travail en équipe, mais également dès qu’il s’agit d’un site Web qui, possiblement va connaître des milliers de visites. Pourquoi ? Tout simplement car dans le développement Web plus qu’ailleurs, nul doute qu’il est indispensable de coder à la fois proprement et optimiser le code source au maximum. Néanmoins, la tendance actuelle semble de plus en plus négative envers le code et tend à se dégrader à l’avenir…
Un code optimisé pourquoi et comment ?
L’optimisation est aujourd’hui devenue un enjeu majeur pour les développeurs. Non pas qu’elle n’intéressait personne avant, mais elle s’est réellement démocratisée depuis que Google s’est fâché. En effet, en souhaitant un Web plus rapide, le géant de la recherche a pris des mesures radicales contre les sites qui ne disposent pas d’un chargement rapide. Autrement dit, il est nécessaire d’optimiser à 100% nos pages Web. Qu’il s’agisse des images, des scripts, ou encore du CSS tout y passe.
C’est d’ailleurs sur ce dernier point que l’article du jour se consacre. Afin de garder votre CSS « propre » il existe de nombreux outils tels que ProCSSor, une application de bureau pour Mac qui nettoie et compresse votre code, ou encore CSS Compressor, Code Beautifier et CSS Beautify.
Cependant, aucune de ces options ne peut nettoyer votre code CSS dans le but de supprimer les sélecteurs inutilisés afin de vous aider à garder un code allégé. C’est là que mincss entre en jeu.
Comme son créateur Peter Bengtsson l’explique, mincss est un outil qui, lorsqu’on lui donne une URL – ou plusieurs – télécharger la ou les page(s) et tout le code CSS associé afin de comparer chaque sélecteur dans le CSS pour savoir ce qui n’est pas utilisé. Le résultat final est le fichier d’origine avec ces sélecteurs CSS inutilisés – pas trouvé dans votre code HTML – retirés.
Dit plus simplement, si j’ajoute un style à un paragraphe de ma page HTML, puis je finis par remplacer ce paragraphe par une vidéo, je pense que les styles appliqués à mon paragraphe resteront inutilisés dans mon code CSS. Mincss permet de s’assurer que vous avez supprimé ces styles inutilisés pour garder au plus propre votre fichier de styles.
Bengtsson note que mincss est également particulièrement utile lorsque vous utilisez un lourd framework non personnalisé comme Bootstrap. Cependant, cet outil ne permet pas de prendre en considération les éléments créés par du code JavaScript.
Découvrez comment utiliser mincss depuis ce lien et pour en apprendre davantage sur le projet suivez ce lien.
Avez-vous d’autres outils pour gérer votre code CSS et plus particulièrement pour optimiser votre code ?
