Astuces pour optimiser le CSS

optimisatin css

Généralement, lorsqu’on est face à un nouveau projet, il arrive souvent que l’on ne prenne pas forcément le temps de penser à l’optimisation.
Le principal objectif étant de satisfaire le client en respectant le planning fixé en codant pour tous les navigateurs de manière propre.

Aujourd’hui, cela n’est plus suffisant. Effectivement, une fois que tous les tests sont effectués, il sera nécessaire de faire de nombreuses retouches surtout dans le cas d’un grand projet digital.

Pour vous aider, voici quelques astuces qui vous permettront d’alléger et de compresser le code CSS.
Vous connaissez déjà quelques-uns de ces astuces, mais nous vous les rappellerons quand même.

Première astuce : la compression des marges

Concernant les marges extérieures et intérieures, il vous est possible des préciser le côté auquel vous désirez mettre votre marge.

Un petit exemple, pour une marge extérieure en haut, il vous suffit de mettre « margin-top:10px ».
Toutefois, dans le cas où vous désirez spécifier une marge sur chaque côté, le mieux est de tout combiner comme cela, « margin:10px 5px 20px 5px ».

Ces valeurs données devront être appliquées dans le sens chronologique suivant : haut, droit, bas et gauche. Si les marges haut-bas et gauche-droit possèdent les mêmes valeurs, vous pourrez vous faciliter la tâche en écrivant « margin:10px 5px ».

Deuxième astuce : écriture optimiser pour le background

Comme pour les margin et padding, il est possible de compresser toutes les propriétés d’arrière-plan en une seule propriété background.

Troisième astuce : écriture optimiser des fonts

Toujours dans la même lignée que pour les margin, padding et background, toutes les propriétés CSS des polices peuvent être regroupées en une seule propriété font.

Une autre petite astuce, il arrive généralement que dans vos styles de textes, vous utilisez les mêmes lignes pour de nombreux blocs. Avec la création d’une seule classe que vous utiliserez de manière transversale dans votre site, vous gagnerez énormément en compression et allègement de votre code CSS.

Cinquième astuce : allègement des listes

Encore et toujours pour compresser, vous pourrez regrouper toutes vos petites propriétés list-style : list-style-image, list-style-position et list-style-type dans une seule propriété list-style

Sixième astuce : abréger les codes hexadécimaux

Si vous utilisez des codes hexadécimaux au lieu des codes RVB, vous pourrez également abréger vos codes. Géneralement, un code complet est composé de 6 chiffres et lettres. Pour les plus communs contenant 6 caractères identiques, il est possible d’alléger le code en compressant les caractères à 3.
Pour la couleur noire par exemple : #000000, vous pouvez abréger en écrivant tout simplement #000.

Septième astuce : alléger l’écriture des transitions CSS

Actuellement, les transitions en CSS sont fréquemment utilisées. Ces dernières peuvent également être regroupées en une seule propriété transition.
De ce fait, toutes les petites propriétés transition-property, transition-delay, transition-timing et transition-duration seront compressée dans une seule ligne d’écriture.

Dernière astuce : l’utilisation des préprocesseurs comme SASS ou LESS

Pour rappel, toutes les astuces précédentes sont basées sur du CSS classique. Avec l’utilisation des préprocesseurs LESS ou SASS, il vous sera possible d’aller encore plus loin grâce à la dynamisation des feuilles de styles.
Par exemple, vous pourrez utiliser des fonctions ou des variables CSS.

Répondre