Country / Dev

Organiser ses CSS

par Country le 31 mars 2008 à 23:40

Hop, la 3ème édition du WaSP café aura lieue le 17 avril (inscrivez-vous !) avec, comme la dernière fois, 3 ateliers : Accessibilité, CSS et Sémantique (1). La dernière fois j’avais choisi l’atelier Javascript et je n’avais franchement pas été déçu. Cette fois-ci j’ai choisi l’atelier CSS dont le thème est “Organiser et gérer vos CSS”, l’occasion pour moi d’évoquer ici comment j’ai choisi d’organiser les miens pour le dernier projet sur lequel je travaille.

Il s’agit d’un projet assez important avec beaucoup de pages différentes et donc beaucoup de fichiers CSS (2).

Organisation de nos fichiers

Voila comment seront organisés les fichiers CSS :

  • un fichier CSS commun à tout le site (main.css)
  • un fichier CSS supplémentaire par page (nom-de-la-page.css)

Le header de notre page (j’utiliserai une page nommée “Article” dans mes exemples) ressemblera alors à ça :

<link rel="stylesheet" type="text/css" href="/style/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/style/article.css" media="screen" />

Le fichier main.css contiendra :

  • le Reset CSS (3)
  • le layout : header, footer, navigation, classes adéquates pour pouvoir faire 1,2 ou 3 colonnes, etc. Bref tous les éléments communs à toutes les pages du site.
  • les éléments communs : des éléments que l’on retrouve un peu partout sur le site (boutons, messages d’erreur, éléments de formulaire, etc.)).
  • la page d’accueil : la page par laquelle la majorité des visiteurs arrivent (économie d’une requête HTTP) (4).

Le fichier article.css contiendra quant à lui… le CSS de la page article (5).

Eléments de page communs

Il arrive que des éléments soient présents sur plusieurs pages sans pour autant qu’il soit nécessaire de les charger dans le fichier main.css. Dans ce cas j’utilise @import dans mon fichier de page afin d’importer ces éléments.

Structurer nos fichiers

Maintenant va falloir structurer nos fichiers CSS, rien de compliqué, quelques commentaires ça éclairci tout de suite les idées.

Le Header

Je démarre toujours mon fichier avec un Header claire et concis, avec ces quelques informations :

  • Titre du CSS
  • Courte description du fichier
  • Nom du projet
  • Auteur
  • Copyright (ou pas)
  • Sommaire

Voila, rien d’extraordinaire, sauf peut être le dernier : Sommaire. Nous verrons celui-ci plus tard.

Le Sections

Nous allons diviser notre fichier CSS en plusieurs sections et sous-sections. Chacune aura un niveau de titre différent :

Titre de niveau 1 :


/* ================================
 * Section
 * ================================*/

Titre de niveau 2 :

/*
 * Sous-section
 */

Titre de niveau 3 :

/* Sous-sous-section */

On peut imaginer que notre section soit la sidebar, chaque sous-section un bloc de cette sidebar et chaque sous-sous-section une partie spécifique de ce bloc. On remplira alors notre sommaire avec nos niveaux de titre.

Au final on aurai un fichier CSS qui ressemblera à ça :

/*-----------------------------------------------------------
	Article CSS
	Styles for the article page
 
	Project:	MyProject
	Author:		me
	Summary :
		Sidebar (import)
		Article
			Article body
			Article comments
				Article comments form
----------------------------------------------------------*/
 
/* ================================
 * Sidebar (import)
 * ================================*/
@import "sidebar.css";
 
/* ================================
 * Article
 * ================================*/
 
/*
 * Article body
 */
 
/*
 * Article comments
 */
 
/* Article comments form */

Et les "Hacks" pour IE ?

Les règles spécifiques à IE seront réunies dans une section à la fin du fichier CSS et on utilisera les commentaires conditionnels afin d'appliquer ou non une class sur le body en fonction de la version d'IE.

Le code HTML :

<!--[if IE 6]><body class="IE6 IE"><![endif]--> <!-- Apply patches for IE6 and IE7 -->
 <!--[if IE 7]><body class="IE"><![endif]--> <!-- Apply patches for IE7 only -->
 <!--[if !IE]>--><body><!--<![endif]--> <!-- Not IE, do not patch -->

Ainsi body aura :

  • Une class IE sous IE6 et IE7
  • Une class IE6 sous IE6 seulement

Voici ce que ça donnerai donc dans notre fichier CSS :

/* ================================
 * !IE Patches (PNG fix, hasLayout triggers, etc.)
 * IE<6 is not supported
 * ================================*/
 
/*
 * Article
 */
.IE #article { zoom:1; }
 
/* Article comments */
.IE6 #article-comments p { height:40px; }
 
	/* Article comments form */

Conventions

Voila pour ce qui est de l’organisation globale. En plus de ça je me suis imposé quelques conventions à respecter dans mes fichiers, je vais vous les lister en vrac et libre à vous de les utiliser ou pas :

  • Tout en anglais
  • Séparation des différents mots d’un id/class avec des tirets : .nav-page, #article-comment-preview, etc.
  • Utilisation du single line CSS (6)
  • Propriétés dans l’ordre alphabétique
  • Indentation du code, de la même manière que le code HTML
  • Pour les styles liés aux Javascript, via Javascript j’ajoute un id #js sur l’élément HTML (7) et j’attaque mes éléments par #js selecteur { … }

Conclusion

Et voila, je pense que j’ai rien oublié. Faites le moi savoir si je fais de grosses erreurs de conceptions, si vous avez vous aussi des astuces à partager ou autre. Sinon, on se vera au WaSP café pour parler de tout ça ;)

  1. Microformats/RDFa
  2. Le dernier projet en date en comportait plus d’une 100ène
  3. J’utilise celui d’Eric Meyer
  4. En plus ça peut nous simplifier la vie pour certains éléments des pages annexes.
  5. Parfois je fais des trucs logique aussi ;)
  6. Là j’entends des dents grincer, mais croyez moi, après un petit temps d’adaptation on trouve ça beaucoup plus pratique.
  7. class n’est pas autorisé sur l’élément HTML, seul id l’est.

Commentaires

Laisser un commentaire

Flux RSS des commentaires de ce billet

(obligatoire)

(obligatoire)