Débuter sainement avec les CSS
Une bonne feuille des style est un élément essentiel pour obtenir un design digne de ce nom. Cet article n’a pas pour vocation de vous apprendre des astuces, trucs et autres méthodes pour améliorer vos connaissances des CSS, mais simplement vous aider à mieux les concevoir.
Pour rappel, une feuille de style est un document qui permet d’habiller tous les éléments HTML de votre page pour la rendre plus élégante et attrayante aux yeux des visiteurs.
Cet habillage se fait par une syntaxe claire, mais, dans les grosses pages, les éléments HTML et leurs classes peuvent être nombreux, et par conséquent, la feuille de style devient vite un vrai bordel ? bazard ? oui, un vrai bordel.
Ainsi, il devient vite indispensable, lorsqu’on attaque un gros projet, de se montrer organisé et méthodique avec tous ce genre de scripts.
Voici donc les étapes que j’applique (en théorie) sur de “gros” projets. (par gros, comprenez que les éléments HTML à habiller sont assez nombreux …)
1/ Organiser ses balises
L’organisation des balises est un vaste débat, il y a les partisans du rangement alphabétique (ou plutôt alphanumérique), et ceux qui bossent sur la hiérarchisation, suivant ainsi l’organisation du document HTML à habiller.
Des deux méthodes (qui ont chacune leurs avantages et leurs inconvénients), ma préférence va à la seconde.
La raison de mon choix est toute simple : j’aime que mes feuilles de styles suivent (à peu près) l’ordre de mon document HTML. En principe, je pars de l’élément le plus gros, grand, englobant, bref de toute façon c’est souvent la balise html elle-même. Pour finir par mon élément le plus petit, enfant, le dernier de la hierarchie (c’est souvent un em ou un td).
html{/*la première balise*/}
body{/*sa descendante/fille*/}
div#header{/*mon premier cadre*/}
div#logo{/*le logo se trouvera dans mon header*/}
div.corpsdelapage{/**/}
etc…
Ainsi, je retrouve (normalement) mes balises.
1bis/ Ranger les propriétés
Tout comme l’ordre des balises, l’ordre des propriétés définies à l’intérieur de celles-ci n’a aucune importance pour les navigateurs, en revanche, il peut revêtir une importance capital pour vous ou les développeurs qui passent derrière vous.
Dans une logique toute logique bête simple, je classe donc mes propriétés par ordre alphabétique.
div.monJouliDiv{
background : #112211;
border : 1px solid #ccc;
height : 20px; //etc …
}
2/ Reset pour tous
Je ne vous invite pas à redémarrer votre ordinateur, ni à fermer cette page (surtout pas ^^), mais je vous propose d’instaurer des valeurs par défaut cohérentes à vos balises.
Quand on attaque un habillage en partant de zéro et/ou lorsqu’on souhaite réaliser une page compatible avec tous les navigateurs, on se heurte souvent à des décalages, des cadres qui “sautent”, se chevauchent, etc ….
La raison en est simple : les navigateurs imposent un style par défaut pour chaque balise HTML. Le reset est donc un manière de pallier à ce genre de problèmes. Voici comment je (et de nombreux développeurs, intégrateurs et designeurs) procède :
html, body, div, h1, h2, h3, ul, ol, li, p, form, fieldset, table, th, td { margin: 0; padding: 0; } // Placez les balises selon votre document HTML
3/Soignez votre “présentation”
Je sais que les scripts ne sont pas la partie visible de votre site mais il est important (à mes yeux) d’en soigner l’écriture.
Il existe de nombreuses manières de mettre en page ses balises et leurs propriétés.
Personnellement, je laisse mes propriétés en ligne lorsqu’elles sont moins de 4 par balises, au delà, je mets des retours à la ligne pour chacune (en prenant soin d’indenter mes lignes d’une tabulation).
body{margin:0;padding:0}
h1{
border : 1px dashed #000;
font-size : 50pt; //ça devrait être lisible …
letter-spacing : 30px;
text-decoration:none; //surtout pas de blink, avec une police aussi grosse ^^
//etc…
}
4/ Commentez !!!
Les commentaires constituent le point de repère principal pour vous y retrouver dans toutes ces balises, mots en anglais et autres #.* etc … De plus, je fais parti des petits fouineurs, des types qui pour une raison ou une autre vont jeter un coup d’œil au code source d’un site, à ses javascripts ainsi qu’à ces feuilles de styles, donc merci de commenter ça me facilitera la tâche 
Tout comme en PHP et Javascript (ainsi qu’en C/C++, et bien d’autres langages), les commentaires sont soit :
- précédés d’un double slash : //mon commentaire se terminera en fin de ligne
- ou alors entourés par /* et */ : /* ce commentaire se finira après ce symbole */
Évidemment, certains de ces conseils vous sembleront logiques et simples, mais je pense qu’ils sont loin d’être inutiles pour quiconque souhaite attaquer sainement avec les CSS.
Et vous (oui, vous qui avez eu le courage de tout lire jusqu’au bout ^^), avez-vous d’autres astuces à partager ?
Cet article est inspiré de celui-ci