Gou blog

Pour compléter le billet d'hier sur le sujet et un autre billet que j'ai déjà fait par le passé, je vous propose d'aller un peu plus loin en structurant vos CSS avec des gabarits. De cette façon, on retrouve l'information toujours au même endroit à tout moment.

J'ai moi-même une structure bien particulière de faire mes CSS, dont je vous fait part ici même. C'est en fait un extrait d'un document interne de mon ministère sur lequel j'ai planché il y a un certain temps. Les CSS que je présente sont associées au gabarit HTML que j'utilise de façon régulière pour toute application ou tout système Web.

J'en imagine déjà qui sont en train de se tordre sur leur chaise, et c'est normal... Ce ne sont là que des pratiques que j'utilise de façon courante et non des règles doctrinales et dogmatiques... Z'avez des commentaires pour améliorer mes pratiques? allez-y! ça ne peut que faire du bien!!

Structure d'une CSS

Mon expérience de Web designer dans un environnement de développement informatique m'a permi de voir que, outre la création d'un site, il y a son entretien et l'évolution de celui-ci. Or, si les CSS ne sont pas structurées de façon à permettre de se retrouver facilement, on y perd vite notre latin!

Il est fortement recommandé de regrouper les informations qui ont une affinité. Étant donné que la CSS est lue de haut en bas, il importe de définir les styles généraux en haut et les spécifiques en bas de feuille.

Informations sur la CSS (entête)

Cette portion contient les informations sur la date de création de la CSS, l'application pour laquelle elle a été créée, le type de gabarit et la version. On retrouve aussi une ligne indiquant le médium de cette feuille. Cette ligne est importante pour faire une distinction rapide lorsque l'on travaille sur deux feuilles de média différents.

/* ------- Feuille de style Application, Ministère/Organisme ------- */ /* version classique, gabarit trois colonnes avec menu à gauche */ /* all all all all all all all all all all all all all all */

Importation de CSS (@import)

Si on doit importer des CSS, par exemple, une feuille dédiée au médium d'impression (@media print), il faut l'indiquer tout en haut, avant même de mettre ne serait-ce qu'une seule déclaration de style. Cette pratique est nécessaire pour que le validateur nous donne son aval (et que l'importation fonctionne correctement dans certains fureteurs).

/* importation nivau supérieur*******************/ /* Feuille de style globale du ministère ********/ @import url(../global/global.css); /* Imports pour différents médias */ @import url(applicationX_print.css);

Ouverture et fermeture du @media

On ouvre la balise @media au début de la feuille et la refermer à la fin de celle-ci lorsque la CSS est associée à un médium particulier (voir Structurer ses CSS pour plus de détails).

/*------> ouverture média */ @media all { ... déclarations de styles ... /*------> fermeture @media*/ }

Balises génériques

La portion « Balises génériques » est la plus importante. C'est elle qui permet la définition des balises de base du HTML. On doit utiliser le maximum des balises standard sans identificateur ni classe de façon à alléger le code et la CSS.

On définit donc ici le maximum de balises. On pourra aussi, au besoin recourir aux sélecteurs descendants, enfants ou adjacents pour des cas particuliers. On va généralement s'assurer de regrouper les balises par groupe de ressemblance. Par exemple, les balises de tableaux (table, tr, td, th), les balises de liens (a), les balises d'objets (img et object) et les balises de textes (p, quote, blockquote, em, strong...) seront regroupés par groupes logiques pour faciliter la gestion.

Il est à noter que ce bloc débute généralement par le sélecteur universel qui nettoie les styles suivi de la balise body.

/*------> Les balises génériques */ * {margin:0; padding:0; /* border:0; > > à ne pas mettre si on désire conserver l'apparence par défaut (du système) des boutons */ font-family: sans-serif; font-size: 1em; font-weight: normal; font-style: normal; text-decoration: none;} body {margin:0; font-size:76%; font-family:trebuchet ms, arial, helvetica, bitstream vera-sans, sans-serif;} img {border:0;} a {font-size:small; color:#003399; text-decoration:underline;} a:hover, a:focus {color:#ffffff; text-decoration:none;}

Le « Positionnement »

La portion « Positionnement » est le noyau de la mise en page. C'est à cet endroit que l'on définit la position des trois blocs de contenu du site et du conteneur principal (excluant le PIV), soient: Contenu, Navigation, Complément et Information. On les positionne les uns par rapport aux autres. On pourra ici définir trois colonnes ou bien un deux colonnes avec onglets. S'il y a d'autres blocs à ajouter dans le bloc #information, on définira leur position dans la section « information ».

Si on désire cacher un bloc pour un médium particulier, on pourra définir ici display:none pour le bloc approprié.

/*------> Positionnement */ #navigation {display:block; float:left; clear:none; width:150px; height:100%; background:#777777;} #information {display:block; background:#e7e7ef; margin-right:200px; margin-left:150px; clear:none;} #complement {display:block; float:right; clear:none; width:200px; background:#777777;;} /* ceci sert à faire suivre la boîte content dans ie */ #cleaner {display:block; clear:both;}

Structure de la déclaration de style

Lorsque l'on crée une déclaration de style, il est préférable de respecter une mise en forme constante pour permettre de se retrouver facilement. Ces règles n'auront aucune incidence sur l'application, elles ne servent qu'à permettre une plus grande cohérence entre les différentes CSS.

Il est souvent préférable de coder les CSS manuellement. Bien que les logiciels deviennent de plus en plus performants, un designer qui connaît bien le code aura plus de facilité à corriger les problèmes qui surviendront (car il y en aura!). Il existe des particularités aux CSS qu'il ne faut pas omettre lorsque l'on travaille sur un fichier.

Les règles de CSS sont idéalement définis sur une seule ligne, cette approche a pour principale conséquence d'éviter d'avoir une page trop longue en plus d'alléger la CSS. En effet, on diminue le nombre d'espaces ou de tabulateurs nécessaires pour créer une CSS qui serait organisée de façon verticale.

On retrouve dans une déclaration de style, dans l'ordre, les informations suivantes:

1. Le « positionnement » (Position, display, float, clear, visibility, margin, padding...)
2. Les informations de polices (color, font-faimily, font-size, font-weight, text-decoration...)
3. Les bordures et fonds (border, background)
4. Les informations complémentaires (z-index, white-space, cursor...)

En espérant que ça peut en aider quelques uns...