10 astuces à savoir pour alléger votre code CSS

Je vous propose aujourd’hui de suivre 10 astuces pour limiter le nombre de lignes dans vos fichiers CSS et donc d’optimiser le temps de chargement de votre site.

Souvent quand on code une nouvelle interface graphique on ne prend pas toujours le temps de penser optimisation. Le but premier et de satisfaire le client en restant dans les plannings tout en codant proprement et pour TOUS les navigateurs et devices. Sauf que cela ne suffit plus. Car une fois l’étape des tests de chargement effectués vous allez devoir faire de nombreuses retouches (si vous êtes sur un bon projet digital !).

Du coup autant prendre les devants et tenter d’optimiser au maximum le nombre de lignes et donc le poids de vos fichiers CSS. Pour se faire je vous propose 10 astuces à revoir ou à connaitre afin de compresser de façon drastique les CSS.

Astuce CSS 1 / Compresser les margin et padding

Pour les marges intérieures et extérieures vous avez la possibilité de préciser sur quelle coté vous souhaitez ajouter votre marge, par exemple pour ajouter une marge extérieure en haut vous devez écrire : margin-top:10px cependant si vous souhaitez spécifier une marge sur chaque côté il serait préférable de tout combiner. Cela donne margin:10px 5px 20px 5px. Ces valeurs seront appliquées de cette façon : haut, droit, bas et gauche (sens chronologique). Dans le cas ou la marge haut / bas et gauche / droit sont pareils vous pouvez écrire margin: 10px 5px.

En suivant cette astuce le code suivant :
p {
margin-top: 10px;
margin-left: 20px;
margin-bottom: 10px;
margin-right: 20px;
padding-top: 10px;
padding-left: 20px;
padding-bottom: 10px;
padding-right: 20px;
}

Se transforme ainsi :
p {
margin: 10px 20px;
padding: 10px 20px;
}

Astuce CSS 2 / Compresser les css pour le background

Pour les backgrounds c’est un peu le même combat. En effet il existe ici de nombreuses propriétés qui permettent tous de paramétrer l’arrière-plan : background-color, background-image, background-repeat … Je vous invite à nouveau à compresser tout dans la même propriété généralement appelé background.

En suivant cette astuce le code suivant :
p {
background-color: #ffffff;
background-image: url("image.png");
background-position: right top;
background-repeat: no-repeat;
}

Se transforme ainsi :
p {
background: #fff url("image.png") no-repeat right top;
}

Astuce CSS 3 / Et pour les polices c’est pareil

Pour styliser les polices de caractères c’est aussi la même chose, les propriétés CSS : font-size, font-variant, font-weight, line-height et font-family peuvent tous être regroupées dans la propriété font.

En suivant cette astuce le code suivant :
p {
font-size: 10px;
line-height: 12px;
font-weight: bold;
color: #ffffff;
font-family: Arial;
}

Se transforme ainsi :
p {
font: bold 10px/12px #fff Arial;
}

Autre petite astuce, dans les styles de textes il arrive souvent d’utiliser les mêmes lignes pour de nombreux blocs, pourquoi ne pas créer une classe que vous utiliserez de façon transversale dans votre site ?

Astuce CSS 4 / Compresser les bordures internes et externes

Toujours en suivant cette logique de rapatriement de plusieurs propriétés en une seule vous pouvez regrouper border-width, border-style et border-color dans la propriété border. Vous pouvez aussi regrouper outline-width, outline-style et outline-color dans la propriété outline.

En suivant cette astuce le code suivant :
p {
border-size: 2px;
border-color: #ffffff;
border-style: solid;
}

Se transforme ainsi :
p {
border: 2px solid #fff;
}

Astuce CSS 5 / Pour les listes aussi

Vous pouvez également regrouper les propriétés : list-style-type, list-style-position et list-style-image dans la propriété list-style.

En suivant cette astuce le code suivant :
ul {
list-style-type: disc;
list-style-position: outside;
list-style-image: url("image.png");
}

Se transforme ainsi :
ul {
list-style: disc outside url("image.png");
}

Astuce CSS 6 / Compresser les codes hexadécimaux

Dans le cas où vous utilisez les codes hexadécimaux plutôt que les codes RVB, sachez qu’il est aussi possible de compresser ces codes. Normalement un code complet contient 6 chiffres et lettres, cependant pour les plus communs comportant 6 caractères identiques vous pouvez le compresser à 3. Par exemple le noir #000000 peut s’écrire tout simplement #000.

En suivant cette astuce le code suivant :
p {
color: #ffffff;
}

Se transforme ainsi :
p {
color: #fff;
}

Astuce CSS 7 / Utiliser des virgules

Dans le cas où vous voyez que vous appliquez exactement le même style sur deux class différentes sachez qu’il est possible de les regrouper en les séparant par une virgule. Par exemple si vous voulez ajouter simultanément du CSS sur les trois niveaux de titres vous pouvez écrire : h1,h2,h3 { } !

En suivant cette astuce le code suivant :
h1{
color: #fff;
}
h2{
color: #fff;
}
h3{
color: #fff;
}

Se transforme ainsi :
h1,h2,h3{
color: #fff;
}

Astuce CSS 8 / Utiliser l’étoile magique

De base tous les navigateurs internet ajoutent des CSS dans les balises principales comme les titres, les paragraphes, les listes etc. Ce qui obligent de nombreux intégrateur et spécifier encore et encore la remise à 0 des marges. En utilisant le code * { } en début de feuille CSS vous pourrez supprimer TOUTES les marges sur toutes les propriétés CSS.

En suivant cette astuce le code suivant :
p {
margin: 0;
padding: 0;
}
h1{
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}

Se transforme ainsi :
* {
margin: 0;
padding: 0;
}

Astuce CSS 9 / Les transitions

Les transitions en CSS sont de plus en plus utilisées, ces propriétés peuvent elle aussi être regroupées. Ainsi les propriétés : transition-property, transition-duration, transition-delay et transition-timing peuvent être regroupées dans la propriété transition.

En suivant cette astuce le code suivant :
a {
transition-property: all;
transition-duration: 1s;
transition-delay: 2s;
transition-timing-function: ease;
}

Se transforme ainsi :
a {
transition: all 1s ease 2s;
}

Astuce CSS 10 / Utiliser des pré-processeurs tel que less ou sass

Les astuces citées ci-dessus se basent sur du CSS classique, cependant en utilisant la technologie less ou sass vous allez pouvoir aller bien plus loin en dynamisant vos feuilles de styles. Vous pourrez par exemple inclure des lignes de CSS complètent dans une variable que vous appellerez au besoin dans votre feuille ! Si vous voulez en savoir plus sur ces méthodes je vous conseille de lire cet article : Révolutionner vos feuilles de styles aves Less.

Et voilà j’ai terminé, bon j’aurais pu continuer la liste encore mais il faut bien s’arrêter à un moment. J’espère que vous aurez appris des choses. Si c’est le cas n’oubliez pas de partager ces connaissances avec vos collègues et amis sur twitter et facebook, à bientôt sur wks.fr

Commentaires