Bonnes pratiques
Ne déstructurez par le code en pensant le structurer..
• Définissez tout à un endroit, ça évitera aux développeurs d’ouvrir 3 fichiers pour modifier un même sélecteur.
L’erreur la plus commune est de se baser sur plusieurs fichiers : layout.css, typography.css, color.css … Ce qui mène souvent à des surchages de règles.
• Par ailleurs, écrivez vos hacks de manière à ce qu’ils sautent aux yeux, utilisez les commentaires d’aides qu’on a vu tout à l’heure ou écrivez les entièrement sur une ligne, ne les externalisez pas dans d’autres fichiers.
• Suivez les recommendations de développement “Zen”, développez de manière à faciliter la dégradation sur les navigateurs d’anciennes générations et l’évolution sur les navigateurs modernes.
Utilisez les sprites CSS en sachant que :
• CSS est destiné à définir la présentation, évitez les techniques de remplacement CSS, le contenu n’est pas sensé se retrouver dans un code CSS, cela entraine des problèmes d’accessibilités :
• Impossible de modifier les tailles de polices ;
• Impossible d’imprimer le contenu ;
• Illisible pour les lecteurs d’écrans ;
• Tout cela est également le câs pour sIFR
• Si le contenu de votre bloc dépasse ses dimensions, il risque de faire apparaitre d’autres parties du fichier qui sert de Sprite
Typographie
• Concevez des pages accessibles, peu importe l’équipement et les méthodes de navigation des utilisateurs, pour ce faire :
• Utilisez des unités de valeurs relatives Cadratin (em), Pourcentage (%) pour définir les tailles de textes ;
• Évitez les unités fixes et non destinées au web Pixel (px,) Point (pt), .. ;
• Assurez-vous de la lisibilité de votre texte : les couleurs, les tailles,
l’interlignage, les polices..
Cours utilisez les sprites CSS structurer, documenter.. (436 KO) (Cours PDF)