Apprendre à écrire du CSS propre et optimisé requiert beaucoup de pratique et un désir imparable de propreté. Garder votre CSS bien rangé n’est pas uniquement une question de satisfaction de votre besoin psychologique de propreté, bien que, dans le cas de sites Web particulièrement volumineux, le gain du chargement des pages est plus rapide. Des temps de chargement plus rapides sont synonymes de facilité d'utilisation accrue et de satisfaction accrue de l'utilisateur.
Cet article examinera plusieurs techniques que vous pouvez utiliser pour optimiser votre CSS, ainsi que plusieurs outils en ligne permettant de compresser automatiquement votre code.
Compresser ou ne pas compresser
Avant de commencer à compresser votre code CSS, il convient de noter qu’il existe souvent un compromis entre le code compressé et le code facile à lire. Beaucoup de codeurs sont fiers de l’organisation évidente dans leur CSS et ne rêveraient pas de le faire passer par des compresseurs qui enlèvent les commentaires et les sauts de ligne. En tant que concepteur Web, vous devez analyser vos objectifs pour le code que vous écrivez. Si vous créez un petit site Web ne nécessitant que quelques lignes de code CSS, une compression supplémentaire n'est peut-être pas nécessaire. De même, si vous écrivez du code que vous devez partager avec une équipe de programmeurs, l'insertion de commentaires et de sauts de ligne supplémentaires peut permettre à vos collègues de gagner beaucoup de temps et de générer une profonde gratitude. Toutefois, si vous concevez un site Web volumineux nécessitant des tonnes de feuilles de style CSS, vous devez absolument garder un œil sur la taille de votre fichier et faire ce que vous pouvez pour le réduire.
La combinaison parfaite entre compression et lisibilité peut prendre un certain temps, mais les deux solutions valent la peine d'être poursuivies et la réalisation de cet équilibre peut grandement faciliter votre travail. En outre, la compression ne réduit pas toujours la lisibilité. De nombreuses techniques que vous pouvez utiliser pour compresser votre code aboutiront à un code meilleur et mieux organisé.
Dans cet esprit, passons à quelques techniques pour réduire au minimum la taille de votre fichier CSS.
Blocs de style vides
Commençons par l'évidence. Si vous avez un bloc de style ne contenant rien, lancez-le. Ne vous plaignez pas de la façon dont vous pourriez les utiliser plus tard non plus, ils sont simplement encombrés et vous le savez. Ne l'ajoutez pas sauf si vous avez une raison de le faire.
Sténographie
CSS Shorthand est une méthode de combinaison de plusieurs lignes de CSS en une seule commande. Prendre l'habitude d'utiliser tous les raccourcis que vous connaissez peut réduire considérablement les lignes de code que vous écrivez à long terme. Voici un exemple:
Version longue:
Version abrégée:
Pour plus d'astuces de sténographie CSS, consultez l'article ci-dessous.
Sprites CSS
L'idée de base des sprites CSS est de réduire le nombre de requêtes HTTP pour accélérer les temps de chargement des pages. La façon dont les sprites réalisent cet exploit consiste à combiner plusieurs images en une seule image, généralement au format grille. Chaque image individuelle est affichée en décalant la position de l’arrière-plan de la plus grande image. Pour un aperçu plus détaillé des sprites CSS, consultez le tutoriel de Chris Coyier sur CSS-Tricks:
Réduction de commentaires
J'aime remplir mon code avec des commentaires. Plus je fais de commentaires, plus vite je peux trier visuellement les différentes sections de code. Toutefois, si vous optez pour une CSS très optimisée avec un faible encombrement, des commentaires excessifs peuvent gruger de précieuses bases de connaissances. Essayez d’éliminer tous les commentaires inutiles et de reformater ceux que vous devez absolument garder autant de caractères que possible.
Familles de polices raisonnables
Lorsque la taille du fichier est un gros problème, n'emballez pas vos familles de polices au maximum avec des alternatives. Éliminez toute la graisse inutile et réduisez vos options supplémentaires à un ou deux.
Avant:
Après:
Utiliser les couleurs Hex
Pour réduire le nombre de caractères, convertissez les valeurs RVB en leurs équivalents hexadécimaux. Cela peut sembler trivial, mais chaque personnage compte!
Avant:
Après:
Éliminer les sauts de ligne
Parcourez chaque bloc de style et supprimez les retours inutiles. Vous pouvez également laisser tomber le dernier point-virgule
Avant:
Après:
10 Compresseurs CSS en ligne
Les compresseurs CSS automatisent une grande partie du travail de nettoyage de votre code. Beaucoup d’entre eux vous indiquent le pourcentage de réduction de la taille de votre fichier. Assurez-vous d’en essayer quelques-uns pour voir lequel est le meilleur.
Lecteur CSS
Options:
- Mode de compression: Léger, Normal ou Super Compact
- Commentaire Stripping: Aucun, tous ou ceux qui dépassent une longueur spécifiée
Compresseur CSS
Options (choisir oui ou non pour chacune):
- Trier les propriétés
- Compresser les couleurs
- Compresser le poids de la police
- Sélecteurs Minuscules
- Supprimer les backlashes inutiles
- Supprimer les points-virgules inutiles
Arantius
Options (choisir oui ou non pour chacune):
Optimiseur CSS
Options:
- Ne pas supprimer les sauts de ligne (oui ou non)
- Obtenir le CSS à partir d'une URL, d'un fichier ou d'un texte collé
Poste de loterie
Options: aucune
CSS propre
Options (choisir oui ou non pour chacune):
- Trier les sélecteurs
- Trier les propriétés
- Optimiser les sélecteurs et leurs propriétés (0, 1 ou 2)
- Fusionner les propriétés abrégées
- Seulement des optimisations sûres
- Compresser les couleurs
- Compresser le poids de la police
- Sélecteurs Minuscules
- Cas pour les propriétés (minuscule de majuscule)
- Supprimer les barres obliques inverses inutiles
- Convertir! Important-bidouille
- Supprimer le dernier;
- Enregistrer les commentaires
- Supprimer les propriétés non valides (CSS2.1, CSS2.0 ou CSS1.0)
- Sortie sous forme de fichier
Pingates
Options (choisir oui ou non pour chacune):
- Convertir les noms de couleurs longues en hexadécimal
- Convertir les codes hexagonaux longs en codes hexagonaux courts
- Convertir un long hex en noms de couleurs
- Convertir RVB en hexadécimal
- Supprimer les mesures nulles
- Combinez des règles identiques
- Combinez des sélecteurs identiques
- Combiner les propriétés
- Supprimer les propriétés écrasées
- Supprimer les valeurs inutiles des marges et du remplissage
- Montrez les statistiques
- Sortie en couleur
- Sortie utilisant la plus petite taille
Insider PHP
Options: aucune
Sept quarante
Options:
- Options de pause: 500, 1000, 1500 ou 2000
Colonne de la page
Options: aucune
GZIP
Malgré le site Web horriblement laid, GZIP est un outil extrêmement utile pour compresser de nombreux types de code. Ce n'est pas la méthode de compression la plus facile à comprendre et peut être déroutant pour les débutants. Consultez ce tutoriel pour plus d’informations sur GZIPPING votre CSS.
Conclusion
Comme je l'ai dit précédemment, beaucoup de ces méthodes peuvent sembler excessives et absurdes. L'astuce consiste à regarder la grande image. Bien que l'un de ces conseils puisse avoir un effet presque insignifiant, la combinaison de plusieurs ou de toutes ces techniques peut avoir un impact important sur la taille du fichier de vos CSS. Utilisez les commentaires ci-dessous pour nous indiquer les méthodes de compression / optimisation que vous utilisez et pourquoi.