Lorsque l’on travaille sur un projet Web il est bon de pouvoir avoir une méthode clair et précise qui nous permettra d’accélérer les futurs développement mais aussi, et surtout, de pouvoir revenir sur d’anciens développement sans être totalement perdu. Je vous propose donc quelques bonnes pratiques CSS, majoritairement trouvées sur Smashing Magazine, et traduite ici pour les lecteurs anglophobes. 
◎ More...
Le point de départ
- Après avoir fait votre design graphique, démarrer avec une page blanche, placer les blocs d’en-tête, de menu, de contenu et de pied de page. Placer ensuite le contenu HTML et enfin passé au CSS. [CSSing]
- Utiliser une feuille de style (master.css) qui appelle les autres. Commencer par faire un “reset” des styles par défaut du navigateur à l’aide d’une feuille reset.css, ensuite séparer vos styles dans différentes feuilles, global.css, structures.css, typo.css. Cela vous permettra de travailler votre style de manière plus clair.[CrucialWebHosting]
master.css@import url(”reset.css”); @import url(”global.css”); @import url(”flash.css”); @import url(”structure.css”);
- Faites vous une librairie de class CSS de bases. Ces classes définissent des propriétés d’alignement ou de taille que vous pourrez réutiliser dans votre code de manière simple.[Richard K Miller]
.width100 { width: 100%; } .width75 { width: 75%; } .width50 { width: 50%; } .floatLeft { float: left; } .floatRight { float: right; } .alignLeft { text-align: left; } .alignRight { text-align: right; }
Organiser votre code CSS
- Organiser votre code CSS en utilisant des marqueurs. Séparer votre feuille de style en sections : Global, En-tête, Contenu, Style de texte, Navigation, Formulaire, Commentaires, Extra, etc … [5 Tips for organizing your CSS]
/* ———————————–*/ /* ———-»> GLOBAL «<———–*/ /* ———————————–*/
- Organiser votre code CSS avec une table des matières. La première chose que l’on devrait voir lorsque l’on ouvre votre feuille de style CSS est une tables de matières qui récapitule le contenu de cette feuille. [5 steps to CSS heaven]
/* Table of Contents:Typography Header Layout Middle Layout Footer Layout***/** **/* Typography ————————————————————————————— */** **/* Header Layout ————————————————————————————— */**
- Organiser votre code CSS, les propriétés par ordre alphabétique. “Je ne sais pas ou j’ai eu l’idée, mais je classe mes propriétés CSS par ordre alphabétique depuis quelques mois, et vous me croirez ou non, mais cela les rends plus facile a retrouver” [Christian Montoya]
ID, classes, sélecteurs et propriétés
- Pas trop de conteneur. On a souvent tendance à multiplier les divs comme les petits pains, ce qui revient presque à l’ancienne mode de structurer dans des tableaux. Optimiser vos bloc de manière à avoir le moins de div possible. Ca ne rendra la maintenance, l’ajout ou la modification du site que plus facile. [Ryan Parr]
- Pas trop de propriétés. Si on ajoute une propriété qui n’est pas utile à un endroit, au temps ne pas la mettre, c’est en respectant ce constat simple que vous ne vous demanderez plus jamais “mais pourquoi j’ai mis ca la moi ?”. [CSSing]
- Pas trop de Hack CSS. Certains hack sont utilisés pour corriger des bugs, assurez vous bien de les utiliser correctement sinon ils risquent de se transformer en sources de bug plutôt que en solutions. [10 quick tips for an easier css life]
- Vos codes couleurs en début de fichier CSS. Une bonne manière d’avoir toujours sous la main vos codes couleurs une fois votre design terminé est de les placer en début de fichiers CSS.
# /* # Dark grey (text): #333333 # Dark Blue (headings, links) #000066 # Mid Blue (header) #333399 # Light blue (top navigation) #CCCCFF # Mid grey: #666666 # */
Voila certaines pratiques que j’utilise depuis la lecture de cet article sur Smashing Magazine, je vous ai traduit ou interpréter celles qui me servent le plus, je vous invite à lire tout l’article qui est une vrai mine d’or ! Si cette article vous a plu faites le moi savoir et je renouvellerai l’expérience de traduction/adaptation.
Comments:
Je ne suis pas très familier avec la conception CSS, donc merci pour les réflexions communes.