Apprendre à écrire du CSS propre et optimisé demande beaucoup de pratique et un désir inconscient et compulsif de nettoyer. Garder votre CSS bien rangé ne concerne pas seulement votre besoin psychologique fou d'être propre, cependant, en particulier pour les sites plus grands, cela accélérera le chargement des pages. Des temps de chargement plus rapides sont synonymes d’une meilleure convivialité et d’une plus grande satisfaction des utilisateurs.
Beaucoup de gens ont des fétichismes du code. Ce n'est pas une mauvaise chose.
Cet article rassemblera les techniques que vous pouvez utiliser pour optimiser votre CSS, ainsi que certains outils de compression en ligne et de bureau qui peuvent compresser automatiquement votre code.
Compresser ou ne pas compresser
Avant de discuter de la manière de compresser CSS, il est important de noter qu’il existe souvent un équilibre entre compression et lisibilité du code. De nombreux codeurs sont fiers de l'organisation propre de leur CSS et ne souhaitent pas que leur code soit exécuté via un compresseur pour supprimer les commentaires et les sauts de ligne. En tant que concepteur, vous devez analyser les objectifs du code que vous écrivez. Si vous créez un petit site Web qui ne nécessite que quelques lignes de CSS, il n’est peut-être pas nécessaire d’effectuer une compression supplémentaire. De même, si vous écrivez du code qui doit être partagé avec une équipe ouverte, l'insertion de commentaires et de sauts de ligne supplémentaires peut faire gagner beaucoup de temps à vos collègues et mériter leurs sincères remerciements. Cependant, si vous concevez un grand site Web nécessitant beaucoup de CSS, vous devrez certainement faire attention à la taille de votre fichier et le garder aussi petit que possible.
Trouver la combinaison parfaite entre compression et possibilité peut prendre un certain temps, mais les deux valent la peine d'être explorés et trouver un équilibre entre eux peut rendre votre travail beaucoup plus facile. Dans le même temps, il est évident que la compression n’entraîne pas nécessairement une diminution de la lisibilité. Il existe de nombreuses techniques disponibles pour compresser le code qui permettent d'obtenir un code meilleur et plus organisé.
Dans cet esprit, commençons par examiner quelques techniques permettant de minimiser les fichiers CSS.
Définition du style vierge
Commençons par l'évidence. Si vous avez un style vide, jetez-le. Ne vous excusez pas en disant que vous pourriez en avoir besoin plus tard et que vous savez qu'ils sont en désordre. Ne les ajoutez pas sauf si vous avez une raison valable.
abréviation
L'abréviation CSS est un moyen de combiner plusieurs lignes CSS en une seule ligne. Prendre l’habitude d’utiliser toutes les astuces d’abréviation que vous connaissez peut réduire considérablement le nombre de lignes de code que vous finissez par écrire. Voici un exemple :
Version longue :
#conteneur{padding-top:5pxpadding-right:10pxpadding-bottom:30pxpadding-left:18px}Version abrégée :
#conteneur{padding:5px 10px 30px 18px;}Pour en savoir plus sur les abréviations CSS, vous pouvez consulter les articles suivants :
Sprites CSS
L'idée originale derrière les sprites CSS était de réduire le nombre de requêtes HTTP pour accélérer les temps de chargement des pages. La façon dont Sprite atteint cet objectif est de combiner plusieurs images en un seul fichier image, généralement une image au format grille. Chaque image individuelle est affichée en changeant la position d'arrière-plan de l'image de sprite plus grande. Pour le code CSS, l'utilisation de la technologie sprite peut considérablement améliorer la réutilisabilité et la maintenabilité du code, ce qui réduira considérablement la quantité de code CSS.
Pour en savoir plus sur les Sprites CSS, consultez le tutoriel de Chris Coyier sur les CSS-Tricks :
Bien entendu, Front-End Observation propose également des articles et des conseils précieux sur les Sprites CSS.
Réduire les commentaires
J'aime utiliser les commentaires dans mon code. Plus j’ajoute de commentaires, plus vite je peux naviguer visuellement dans les différentes parties du code. Cependant, si vous avez besoin d’un CSS hautement optimisé qui utilise peu de ressources, des commentaires excessifs consommeront de précieux octets. Essayez donc de supprimer tous les commentaires inutiles et de reformater ceux que vous devez conserver avec le moins d'octets possible.
Type de police raisonnable (font-Family)
Lorsque la taille du fichier est un problème majeur, n'incluez pas de polices alternatives dans votre famille de polices. Débarrassez-vous de tout bagage inutile et réduisez vos options supplémentaires à une ou deux.
Avant:
#container{font-family:Palatino,Georgia,Times,serif;}après:
#conteneur{font-family:Palatino,serif;}Concernant les polices, je recommande fortement de lire "Trois discussions sur les polices Web par défaut" écrites par Yu Bo. Plusieurs articles mentionnés dans l'article méritent également d'être lus et réfléchis.
Utiliser une couleur hexadécimale
Afin de réduire le nombre d'octets, toutes les valeurs de couleur RVB sont converties en valeurs hexadécimales correspondantes. Cela ne veut peut-être pas dire grand-chose au début, mais n’importe quel octet en vaut la peine !
Avant:
#conteneur{couleur:rgb(131, 100, 219);}après:
#conteneur{couleur:#8364DB;}Supprimer les sauts de ligne
Parcourez chaque attribut de style et supprimez tous les retours durs qui ne sont pas nécessaires. Vous pouvez également supprimer le dernier point-virgule.
Avant:
#conteneur{marge :5px;padding:5px 10px 30px 18px;}après:
#conteneur{marge :5px;rembourrage :5px 10px 30px 18px}10 outils de compression CSS en ligne
Les minificateurs CSS peuvent automatiser une grande partie du travail de nettoyage de votre code. Beaucoup d’entre eux vous indiqueront quel pourcentage de vos fichiers sont compressés, alors essayez-en quelques-uns pour voir lequel est le meilleur.
Lecteur CSS
Possibilités :
Mode de compression : compression faible, normale, élevée
Compression des commentaires : aucune compression, la totalité ou une durée supérieure à une certaine valeur.
Compresseur CSS
Options facultatives (vous pouvez choisir Oui ou Non pour chacune) :
Réorganiser les attributs
Compresser la couleur
Compresser le poids de la police
Sélecteur minuscule
Supprimer l'espace inutile
Supprimez les points-virgules inutiles
Arantius
Options facultatives (vous pouvez choisir Oui ou Non pour chacune) :
Supprimer les commentaires
Supprimer les commentaires d'une longueur d'au moins x octets
Une règle par ligne