Abonnement au flux RSS
22.06.07 Lisibilité des feuilles CSS
Rubrique Intégration web
Utiliser les feuilles de style c’est bien, les organiser c’est encore mieux ! En effet, la lisibilité d’une feuille de style peut vite devenir fastidieuse au fur et à mesure qu’elle prend de l’ampleur. Pour s’y retrouver plus facilement dans un fichier CSS lors du développement où de la maintenance, j’ai pris connaissance sur internet des techniques que d’autres webdesigner utilisaient. Voici celles que j’ai choisi de retenir pour mes futurs développements.
Utiliser plusieurs fichiers CSS
Plutôt que de réunir tous vos styles dans un seul méga-fichier, utiliser plusieurs feuilles de style. Attention, ne pas abuser du nombre car chaque feuille crée sera autant d’appels au serveur. Je pense que 4 où 5 feuilles sont un maximum.
Pour ma part, j’en utilise 4 :
- une feuille principale (style.css)
- une feuille pour réinitiliser les balises (reset.css)
- une feuille pour ie6 (ie6.css)
- une feuille pour ie7 (ie7.css)
Les feuilles CSS pour Internet Explorer sont appelées à l’aide d’instructions conditionnelles qui sont considérées comme des commentaires par les autres navigateurs.
<!--[if IE 6] >
< link rel="stylesheet" href="http://www.pixenjoy.com/xx/css/ie6.css"
type="text/css" media="screen" / >
< ![endif]-->
<!--[if IE 7] >
< link rel="stylesheet" href="http://www.pixenjoy.com/xx/css/ie7.css"
type="text/css" media="screen" / >
< ![endif]-->Abuser des commentaires
Ne pas hésiter à utiliser les commentaires pour organiser la mise en page de votre feuille de style. Pour ma part j’utilise les commentaires pour décrire :
- une table des matières
- noter des informations utiles
- mettre à disposition un pense bête des principales couleurs
- diviser mon document en plusieurs grandes partie (HTML, Head, Main, Foot …)
Voici ce que cela peut donner :
/* --------------------------------------------*/
/* ---------- TABLE DES MATIERES -----------*/
/* ------------------------------------------*/
/*
- Informations
- Pense bête couleurs
- Balises <HTML>
- #Main
- #Head
- Styles pour la partie blog
- Styles pour la partie CMS
- #Wrap
- #Wrap_LeftBloc
- Styles pour la partie blog
- Styles pour la partie CMS
- #RightBloc
- Styles pour la partie blog
- Styles pour la partie CMS
- #Foot
- .class globales
- Debug
*/
/* ---------- Informations -----------*/
/*
> Les propriétés sont rangées dans
l'ordre alphabéthique
> Les propriétés des balises HTML sont
ré-initialisés dans la feuille CSS ../css/reset.css
> Des feuilles de styles séparées ont
été mises en place pour ie6 et ie7
../css/ie6.css et ../css/ie7.css
*/
/* ---------- Pense bête couleurs -----------*/
/*
Marron foncé (menu principal) : #312e2b
Blanc cassé (fond bas de page) : #f9f4ef
Vert Olive (titres blog + Art. prec.) #6aaf4d
Vert désaturé (titre blog hover) #82a474
Gris (texte) #686665
Gris claire (texte footer) #afacaa
*/
/* ---------- Balises <HTML> (début) -----------*/
/* ---------- Balises <HTML> (fin) -----------*/
/* ---------- Balises Head (début) -----------*/
/* ---------- Balises Head (fin) -----------*/
Fixer des conventions d’écriture
Se fixer des conventions d’écriture permets de s’y retrouver plus facilement dans sa feuille de style pour les futurs relectures. Au début cela demande un peu de discipline mais avec l’habitude l’écriture devient instinctive.
J’utilise les conventions d’écriture suivantes :
- Rangement des propriétés dans l’ordre alphabéthique
pre.code {
background-color:#fafafa;
border:1px dotted #d0d0d0;
clear:both;
margin:2px 0 0 20px;
overflow:auto;
padding:10px;
}- Les ID commencent par une majuscule, les class par une minuscule
#Wrap {}
.foot_adresse {}- Répéter dans le nom des class, le nom des ancêtres
#Wrap_leftBlock {}
.wrap_leftBlock_texte {}- Ecrire ses règles toujours de la même façons
.wrap_leftBlock_texte {1 seule propriété ...}
.wrap_leftBlock_texte {
plusieurs propriétes ...
}Conclusion
Vous forcer à suivre des règles d’écriture pour vos feuilles CSS peut paraître ennuyeux au début. Mais avec la pratique, vous le ferez instinctivement. Mais surtout vous y gagnerez en lisibilité ce qui vous fera gagner du temps.
Les techniques décrites ci-dessus ne sont que des exemples et choix personnels. A vous d’établir vos propres règles. Vous trouverez dans la source cité ci-après d’autres astuces que vous adopterez peut être.
Mes sources
- Smashing magazine, 70 Expert ideas for better css coding
2 commentaires - S'abonner aux commentaires via RSS - (URL de trackback)
le 26.07.08 (12:40)
Bonjour,
Tout d’abord, bravo pour le design de ce site, très plaisant.
Juste deux détails. Premièrement, on peut grouper les correctifs pour IE6 et ceux pour IE7 dans une même feuille de styles, qui sera appelée via un commentaire conditionnel visant IE7 et inférieures (dans la pratique, IE 6 et 7, les versions 5 étant pour ainsi dire éradiquées). Les correctifs pour les deux versions utiliseront des sélecteurs CSS «normaux», ceux pour IE6 utiliseront le Star HTML Hack (* html mon sélecteur {}), et ceux pour IE7 utiliseront le sélecteur d’enfants (html > body mon sélecteur {}). Les hacks, c’est mal quand c’est dans un environnement ouvert, mais ici on sait à quoi on a affaire et donc on évite toute surprise. Le but final de la manœuvre étant d’éviter de jongler entre deux fichiers pour les correctifs IE, et d’économiser un appel serveur.
Deuxième détail: les commentaires dans le CSS c’est très bien, mais dans certains cas ça peut faire monter le poids des feuilles de style très sensiblement. Récemment, j’ai fait une intégration pour un gros site, et j’ai documenté les correctifs IE avec des commentaires très précis. Mon fichier iefixes.css doit faire 20 ko, et tombe à 7 ko si on supprime les commentaires.
Pour un site à fort trafic, on peut envisager de passer les feuilles de style à la moulinette d’un outil qui «optimise» le code pour réduire le poids du fichier. Dans l’idéal, il faudrait avoir la version de développement avec code bien organisé, commentaires, etc., et la version de production qui regrouperait les feuilles de styles, supprimerait les commentaires, et éventuellement ferait d’autres petites opérations de compression. J’avais fait des tests plutôt probants avec YUI Compressor.
le 26.07.08 (12:56)
Merci Florent pour ces compléments d’informations fort intéressants.