30. Limiter le poids des fichiers CSS

[Yanngautreau]

---

title: 30. Limiter le poids des fichiers CSS
people: Yann Gautreau.
scope: Thèmes
state_validation: TO VALIDATE
responsible:

• Code(use·ur) → Développeu·se·r
• Low-code → Freelance et développeur Front-End d'agences
  lifecycle:
• 3 - Développement
  priority_implementation: Fort 👍👍👍
  environmental_impact: Fort 🌱🌱🌱
  saved_resources:
• Réseau
• Requêtes
  path: /fiches/30-limiter-le-poids-des-fichiers-css

---

Sujet

Le poids numérique des fichiers CSS est en constante augmentation depuis 10 ans, les thèmes et les extensions de wordPress chargent chacun des fichiers CSS qui vont se superposer les uns aux autres. La maintenance de vos fichiers de style vont garantir une optimisation de la taille de ces derniers.

GreenIT vous conseille

Supprimons les styles non utilisés, bien souvent par peur de dénaturer certaines pages, les styles ne sont pas supprimer et d'autres règles sont édités, divisons nos fichiers CSS afin de faciliter la maintenance (grid, reset, element, widget, etc...)
N'utilisons pas la commande @import, cela peut sembler pratique mais cela bloque le rendu navigateur le temps du chargement de la ressource, privilégions la hiérarchisation des chargements via la balise
Minifions les fichiers CSS
Évitons d'utiliser les propriétés couteuses en ressources (position : fixed, border-radius, box-shadow, text-shadow, opacity, transform, filter)
Adoptons une approche mobile-first (économie de style et de ressources) et ajoutons les styles (via @media) à mesure que le support s’agrandit

Exemple

Exemple s'il y en a

Principe de validation

Le nombre ...	est inférieur ou égal à
de ...	0

Source

Source s'il y en a

[dNicolle]

@Yanngautreau

Je te propose d'écrire à l'infinitif, comme suit, et j'ai ajouté la mention à la fiche Mobile First :
• Supprimer les styles non utilisés, bien souvent par peur de dénaturer certaines pages, les styles ne sont pas supprimés et d'autres règles sont édités
• Diviser les fichiers CSS afin d’en faciliter la maintenance (grid, reset, element, widget, etc..
• Ne pas utiliser @import pour appeler un fichier de css, cela peut sembler pratique mais bloque le rendu navigateur le temps du chargement de la ressource
• Privilégier la hiérarchisation des chargements via la balise
• Minifier les fichiers CSS
• Éviter d'utiliser les propriétés coûteuses en ressources (position : fixed, border-radius, box-shadow, text-shadow, opacity, transform, filter)
• Adopter une approche mobile-first (économie de style et de ressources) et ajoutons les styles (via https://github.com/media) à mesure que le support s’agrandit (Fiche 20. Mobile First)

Tu peux m’expliquer ce que tu veux dire par là : Privilégier la hiérarchisation des chargements via la balise

[dNicolle]

Et je me rends compte que moi même dans mes fiches, je n'utilise pas forcément l'indicatif, cela dépend des fiches.
Nous ferons surement une passe d'uniformisation en fin de parcours...

[Yanngautreau]

Merci beaucoup @dNicolle , j'ai suivit des preco pour l'indicatif pour les fiches (et clarifier mon propos sur la hiérarchie), j'ai fait des propals d'ajouts/précisions sur quelques pages. Pour l'indicatif cela donne des indications claires, moi j'aime bien le nous car ainsi on s'intègre dans l'éco-conception, parfois pour éviter le côté donneur de leçon qui est souvent reproché aux "écolos" (je n'aime vraiment pas ce terme).

[Yanngautreau]

modifications via branche commit (modif YG 29/09/23)

[dNicolle]

Je suis assez partagée aussi avec l'indicatif, qui se prete plus aux fiches didactiques, alors que le nous se prête bien aux fiches avec plus de rédaction.
Il y a une discussion ouverte par Florine qui reprend ça.