L’introduction suivante aux outils de minification CSS est un extrait du prochain livre de Tiffany, CSS Master, 2e édition qui sera disponible sous peu.
En route pour devenir un maître CSS, vous ' 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? Et comment garantissez-vous la qualité du code?
Savoir quels outils utiliser vous aidera à garantir le bon fonctionnement de votre front-end. Dans cet article, nous aborderons la minification CSS.
Les outils de développement vous aident à trouver et à résoudre les problèmes de rendu, mais qu’en est-il de l’efficacité? La taille de nos fichiers est-elle aussi petite que possible? Pour cela, nous avons besoin d'outils de minification.
Minification dans le contexte de CSS signifie simplement «supprimer les caractères en excès». Considérons, par exemple, ce bloc de code:
h1 {
police: 16px / 1.5 'Helvetica Neue', arial, sans serif;
largeur: 80%;
marge: 10px auto 0px;
}
Il s’agit d’une longueur de 98 octets, y compris les sauts de ligne et les espaces. Voyons un exemple plus précis:
h1 {font: 16px / 1.5 'Helvetica Neue', arial, sans-serif; width: 80%;
Ginmargin: 10px auto 0}
Notre CSS ne fait maintenant que 80 octets de long, soit une réduction de 18%. Bien sûr, moins d'octets signifie des temps de téléchargement plus courts et des économies de transfert de données plus rapides pour vous et vos utilisateurs.
Dans cet article, nous allons examiner CSS Optimizer, ou CSSO, un outil de minification exécuté sur Node.js. . Pour installer CSSO, vous devez d’abord installer Node.js et npm. npm est installé dans le cadre du processus d'installation de Node.js, vous ne devez donc installer qu'un seul package.
Pour utiliser CSSO, vous devez être à l'aise avec l'interface de ligne de commande. Les utilisateurs de Linux et macOS peuvent utiliser l'application Terminal ( Applications> Terminal.app pour macOS). Si vous utilisez Windows, utilisez l’invite de commande. Accédez au menu Démarrer ou de Windows et tapez cmd dans le champ de recherche.
Installation de CSSO
Une fois que vous avez configuré Node.js et npm, vous pouvez installer CSSO. Dans la ligne de commande, tapez:
npm install -g csso
Le drapeau -g installe CSSO globalement afin que nous puissions l'utiliser depuis la ligne de commande. Une fois l'installation terminée, npm affichera un message dans la fenêtre de votre terminal.
Nous sommes maintenant prêts à réduire notre CSS.
Minification avec CSSO
Pour réduire les fichiers CSS, exécutez la commande csso en passant le nom d'un fichier sous forme d'argument:
csso style.css.
Ceci effectuera une compression de base. CSSO supprime les blancs inutiles, supprime les points-virgules superflus et supprime les commentaires de votre fichier d'entrée CSS.
Une fois terminé, CSSO imprimera le CSS optimisé sur la sortie standard, c'est-à-dire le terminal ou la fenêtre d'invite de commande en cours. Dans la plupart des cas, cependant, nous voudrons enregistrer cette sortie dans un fichier. Pour ce faire, passez un deuxième argument à csso le nom du fichier minifié. Par exemple, si nous voulions enregistrer la version abrégée de style.css en tant que style.min.css nous utiliserions ce qui suit:
csso style.css style. min.css
Par défaut, CSSO réorganise des parties de votre CSS. Il fusionnera, par exemple, des blocs de déclaration avec des sélecteurs dupliqués et supprimera certaines propriétés remplacées. Considérons le code CSS suivant:
body {
marge: 20 px 30 px;
rembourrage: 100px;
marge gauche: 0px;
}
h1 {
police: 200 36px / 1.5 sans-serif;
}
h1 {
couleur: # ff6600;
}
Dans cet extrait, de marge gauche annule la déclaration antérieure de margin . Nous avons également répété h1 comme sélecteur de blocs de déclaration consécutifs. Après optimisation et minimisation, nous aboutissons à ceci:
body {padding: 100px; margin: 20px 30px 20px 0} h1 {font: 200 36px / 1.5
➥ sans-serif; couleur: # f60}
Le CSSO a supprimé les espaces superflus, les sauts de ligne et les points-virgules, ainsi que les raccourcis # ff6600 à # f60 . Le CSSO a également fusionné les propriétés et de marge gauche en une seule déclaration ( marge: 20px 30px 0 ) et a combiné nos marges séparées. blocs de sélecteur en un.
Si vous êtes sceptique quant à la façon dont CSSO va réécrire votre CSS, vous pouvez désactiver ses fonctions de restructuration. Il suffit d’utiliser les drapeaux - restructurés ou -off . Par exemple, l'exécution de csso style.css style.min.css -off nous donne les informations suivantes:
body {margin: 20px 30px; padding: 100px; margin-left: 0} h1 {font: 200 36px /
Sans1.5 sans-serif} h1 {color: # f60}
Notre CSS est maintenant minifiée, mais pas optimisée. La désactivation de la restructuration empêchera vos fichiers CSS d’être aussi petits qu’ils pourraient l’être. Évitez de désactiver la restructuration sauf si vous rencontrez un problème.
Les pré-processeurs et post-processeurs (tels que Sass, Less et PostCSS) proposent une minimisation dans le cadre de leurs outils. Toutefois, l'utilisation de CSSO peut réduire la taille de vos fichiers en octets supplémentaires.
Pour en savoir plus sur le débogage et l'optimisation CSS, consultez le livre de Tiffany, CSS Master, 2e édition . [19659004] Articles connexes:
Source link