De l'ordre, que diable !
Rien n'est plus énervant que d'avoir à reprendre un code abscons et illisible que l'on ne sait pas comment attaquer. A mon sens, un travail d'intégration nécessite deux qualités essentielles : de la méthode et de la rigueur. Car, autant le graphiste a pour objectif de produire un résultat créatif et parfois un peu délirant, autant l'intégrateur doit -pour sa part- produire un code propre, compréhensible et facilement modifiable par la suite.
Bien sûr, il n'existe pas une manière universelle de coder : chaque personne le fait en fonction de sa logique et de ses préférences. Néanmoins certaines clefs permettent d'obtenir une feuille de style propre et accessible à tous. Voici quelques unes d'entres elle :
Avertissement : il s'agit d'une méthodologie personnelle, reflet de la conception que j'ai d'un fichier CSS, en aucun cas d'une quelconque "règle à suivre" à tout prix.
Introduction, développement, conclusion
Bien hiérarchiser les blocs de déclarations fait partie de ces petits plus qui peuvent apparaître totalement futiles sur une feuille d'une cinquantaine de lignes... Mais qui peut se révéler terriblement utile lorsque l'on se frotte à des fichiers de 1500-2000 lignes. Là, on est vraiment content de savoir où chercher ! 
La méthodologie est toute simple, c'est comme dans une dissertation.
Prêts pour un petit retour au lycée ?!?
- Tout d'abord il faut introduire le sujet (où, quand, comment) en définissant les propriétés générales de la page et des éléments principaux (
html,body,#conteneur_principal, etc...). - Ensuite on annonce la couleur en présentant le plan du développement et les principaux blocs composant la feuille de style :
#header,#menu,#contenu, et autres#footersont sommairement annoncés. Emplacement, dimensions et arrière-plan suffiront pour l'instant. - Puis les choses sérieuses commencent avec le morceau du roi : le développement.
Il va falloir être inspiré car dans cette partie vous allez reprendre les chapitres annoncés en introduction et... les développer un par un : Où placer le logo dans
#header? Quelle couleur définir pour les liens au rollover dans#menu? Comment spécifier les puces de liste dans#contenu? Dois-je aligner les mentions légales à gauche ou à droite dans#footer? - Enfin, on conclut en faisant preuve d'ouverture et d'initiative. En dissertation, c'est la partie qui sous-entends : j'ai déjà développé un gros morceau, mais je suis sûr(e) que d'autres éléments mériteraient qu'on s'y intéresse. En CSS, c'est pareil : on se concentre sur les pages spécifiques qui contiennent des éléments particuliers, comme par exemple la page de contact.
En rang deux par deux
Un couple par ligne, c'est bien suffisant !
La pratique démontre qu'il est plus facile de travailler avec une vision globale plutôt qu'avec une vision linéaire. Comprendre les interactions des propriétés les unes avec les autres lorsqu'on les a toutes sous les yeux, c'est quand même mieux..., non ?
Jugez plutôt :
body { margin: 0; padding: 0 0 2em 0; font: normal 80%/1em "Trebuchet MS", Verdana, Arial, sans-serif; color: black; text-align: center; background: #F1EFE2; }
body {
margin: 0;
padding: 0 0 2em 0;
font: normal 80%/1em "Trebuchet MS", Verdana, Arial, sans-serif;
color: black;
text-align: center;
background: #F1EFE2;
}
Hiérarchisez vos déclarations
Bien qu'aucun ordre ne soit clairement défini à l'intérieur d'un groupe de déclarations, la pratique m'a démontrée qu'un agencement récurrent facilitait la visualisation des comportements.
Pour ma part, j'utilise toujours le même schéma :
- Le positionnement =>
display–visibility–position–top/right/bottom/left–z-index–float–clear
Il est suivi des caractéristiques qui y sont directement liées. - Les marges et bordures =>
margin–padding–border
Elles permettent de placer l'élément au sein de la page. - Les dimensions =>
width–height–min-width/max-width–min-height/max-height
Elles sont calculées à partir des valeurs de marges internes et de bordures. - Les propriétés de texte =>
font–line-height–text-align–text-indent–text-decoration–text-transform–letter-spacing–word-spacing–color
Elles découlent en partie des déclarations précédemment définies. - L'arrière-plan =>
background
Placé en dernier, il n'influe sur aucun élément et permet de visualiser rapidement l'élément fautif en cas de problème de rendu.
Soyez Bavard
Un jour, un monsieur a écrit : Pensez à fermer vos balises... Soyez bavards !
En CSS, c'est pareil : il ne faut pas avoir peur de commenter votre code, c'est même vivement conseillé !
Qu'il s'agisse d'annoncer les blocs principaux ou d'expliciter une déclaration, votre feuille gagnera en lisibilité et vous en temps de maintenance (ou de codage).
Par exemple le commentaire ci-dessous permet de retrouver rapidement au premier coup d'oeil la partie du code concernant le #footer parmi les nombreuses autres déclarations lors d'un survol rapide de la feuille de style.
/* -----------*/
/* Footer */
/* -----------*/
#footer {
margin: 0 auto;
padding-top: 0.5em;
width: 807px;
height: 3.5em;
color: white;
font-size: 0.95em;
font-weight:bold;
text-align: left;
background: url(design/footer.png) left bottom no-repeat;
}
Ne soyez pas frileux et explicitez le pourquoi de vos déclarations. Cela évite à la relecture de se demander si la ligne incriminée est une erreur, un oubli ou un correctif intentionnel.
#colone_droite {
float : right;
margin-right : 38px;
display : inline; /* Bug IE6 - double marge */
}
Voilà...
Je ne pense pas avoir trouvé la solution ultime pour coder des feuilles de styles parfaites, mais ces quelques règles de base fonctionnent pour moi.
Établissez les vôtres et vous verrez que ça vous simplifiera la vie !
--
Billet de Corinne Schillinger (Cygnus sur le forum).
Par Collectif Alsacréations - jeudi 21 février 2008 à 19:48
Conception Web - #411 - Lu 7623 fois - Intérêt du billet: 3.86(7) - Fil RSS
Trackbacks
Le mardi 26 février 2008 à 07:07, de La Case de l'Oncle Tom :: #
Les trackbacks pour ce billet sont fermés.
Evaluez ce billet
Commentaires
Le vendredi 22 février 2008 à 13:32, par Marin :: site :: #
Le vendredi 22 février 2008 à 13:57, par jbarthe :: site :: #
Le vendredi 22 février 2008 à 14:00, par Changaco :: site :: #
Le vendredi 22 février 2008 à 14:47, par vincent voyer :: site :: #
Le vendredi 22 février 2008 à 14:51, par Florent :: #
Le vendredi 22 février 2008 à 15:41, par neolao :: site :: #
Le vendredi 22 février 2008 à 15:52, par Oncle Tom :: #
Le vendredi 22 février 2008 à 16:37, par Florent V. :: site :: #
Le vendredi 22 février 2008 à 16:40, par Nico :: site :: #
Le vendredi 22 février 2008 à 16:47, par Florent V. :: #
Le vendredi 22 février 2008 à 17:35, par neolao :: site :: #
Le vendredi 22 février 2008 à 22:22, par Victor BRITO :: site :: #
Le samedi 23 février 2008 à 11:29, par Oncle Tom :: site :: #
Le samedi 23 février 2008 à 12:20, par Mehdi Kabab :: site :: #
Le samedi 23 février 2008 à 12:23, par Mehdi Kabab :: site :: #
Le samedi 23 février 2008 à 20:10, par Nico :: site :: #
Le dimanche 24 février 2008 à 00:49, par Joris :: site :: #
Le dimanche 24 février 2008 à 17:41, par Morgan Capron :: site :: #
Le dimanche 24 février 2008 à 22:58, par clb56 :: site :: #
Le mercredi 5 mars 2008 à 17:00, par Adrien Leygues :: #
Ajouter un commentaire
Les commentaires pour ce billet sont fermés.