Skip to content

3- Templating

  1. Générer des spritesheets CSS
  2. Découper les CSS
    • Séparer les CSS en plusieurs fichiers chargés en fonction du contexte (un layout, une page, un content, ...)
  3. Limiter le nombre de CSS et les compresser
  4. Préférer les CSS aux images
    • Les images sont beaucoup plus lourdes
    • ex: coins arrondis en CSS
  5. Ecrire des sélecteurs CSS efficaces
    • éviter les a > b > c dans les CSS
    • se baser plutôt sur les id et les classes
  6. Grouper les déclarations CSS similaires
  7. Utiliser les notations CSS abrégées
  8. Toujours fournir une CSS print
    • Evite d'imprimer toute la page et les éléments inutiles
    • Préciser une police économe comme Century Gothic
  9. Utiliser les commentaires conditionnels
    • Pour éviter aux vieux navigateurs de télécharger des ressources inutiles
  10. Favoriser les polices standard
  11. Préférer les glyphes aux images
    • Beaucoup plus léger que les images
    • A privilégier pour les listes et les menus
  12. Valider les pages auprès du W3C
  13. Supprimer les balises d'images dont l'attribut SRC est vide
    • Sinon le navigateur charge index.html à la place
  14. Redimensionner les images en dehors du navigateur
    • Ne pas redimensionner avec les attributs CSS ou HTML mais avec un logiciel extérieur
  15. Eviter d'utiliser des images Bitmap pour l'interface
    • Privilégier glyphes, CSS ou SVG compressé
  16. Utiliser le chargement paresseux des images