Optimisation de code – comment faire perdre du poids aux pages – le css – 2/5

Minimiser vos feuilles de styles CSS

Pour maintenir le code lisible, c’est une bonne idée d’écrire des commentaires et d’utiliser des retraits:

. Centre {
 largeur : 960 px;
 marge : 0 auto;
 }

/ * --- Structure --- * /

. Introduction {
 marge : 100 px;
 la position : relative;
 }

Mais pour le navigateur, rien de tout cela n’importe réellement. Pour cette raison, n’oubliez pas de diminuer votre CSS grâce à des outils.

Cela va diminuer la taille du fichier, ce qui entraînera des temps de téléchargement, d’analyse et d’exécution plus rapides.

Pour ceux qui utilisent des pré-processeurs comme Sass , Moins et Stylus , il est possible de configurer la sortie de votre CSS compilée à minified.

> Des outils utiles: YUI Compressor , CSS Minifier , cssmin.js .

Combinaison de plusieurs fichiers css

Une autre bonne pratique pour l’organisation et l’entretien des styles est de les séparer en composants modulaires.

			<link href="structure.css" rel="stylesheet" media="all" />
			<link href="banner.css" rel="stylesheet" media="all" />
			<link href="layout.css" rel="stylesheet" media="all" />
			<link href="component.css" rel="stylesheet" media="all" />
			<link href="plugin.css" rel="stylesheet" media="all" />

Cependant, une requête HTTP est requis pour chacun de ces fichiers (et nous savons que les navigateurs ne pouvent télécharger qu’un nombre limité de ressources en parallèle).

			<link href="main.css" rel="stylesheet" media="all" />

Donc il faut combiner vos CSS. Avoir un plus petit nombre de fichiers se traduira par un plus petit nombre de demandes et une page de chargement plus rapide.

Vous voulez avoir le meilleur des deux mondes? Automatiser ce processus à travers un outil de build.

> Des outils utiles: Grunt .

Ne pas utiliser le sélecteur universel

Évitez d’utiliser le sélecteur universel car il force le navigateur à effectuer une recherche sur tous les éléments HTML de la page, et d’appliquer la règle à chacun d’eux.

* {
   marge : 0 ;
  padding : 0 ;
  border : none;
  text-decoration : none;
  outline : 0 ;
 }

Il y aura également de nombreux éléments sur lesquels certains attributs n’auront tout simplement pas d’effet.

Pour cette raison, nous vous recommandons d’utiliser un Reset CSS, ou de créer les vôtres.

> Des outils utiles: Yahoo! Réinitialiser , Normaliser e Réinitialiser Eric Meyer .

Préférez <link> sur @ import

Il ya deux façons d’inclure une feuille de style externe dans votre page: soit via l’ <link> tag:

<link href="style.css" rel="stylesheet" />

Ou par la directive @import  (à l’intérieur d’une feuille de style externe ou dans une balise <style> ):

@import url('style.css');

Lorsque vous utilisez la seconde option avec une feuille de style externe, le navigateur est incapable de télécharger les autres fichiers en parallèle, ce qui peut bloquer le téléchargement globale de la page.

Pensez (et repensez) aux sélecteurs de vos css

Le Sélecteur est la clé de votre expression CSS. En général, les développeurs ne se concentrent pas sur ce point car ils ne savent pas exactement comment il fonctionne.

header nav ul li a {}

Jetez un oeil à l’expression ci-dessus. Ce qui se passe c’est que le navigateur commence l’évaluation de l’expression CSS par la droite, dans ce cas le sélecteur est a . Cette expression particulière demande au navigateur de faire beaucoup de travail. D’abord, il trouve toutes les éléments a dans le code HTML, après tous les éléments li qui contiennent un élément a, et ainsi de suite jusqu’à ce qu’il trouve header nav ul li a .

header nav ul li * { /* Bad */ }
header nav ul li a { /* Worse */ }
nav a { /* Bad */ }
nav a.nav-link { /* Better */ }
nav .nav-link { /* Better */ }
.nav-link { /* Better */ }

Pour lire la suite, cliquez sur la flèche ci-dessous.