Structure pour plusieurs feuilles CSS

Bonjour,

J'ai dans les pages sur lesquelles je travaille trois feuilles de styles :

une pour le header,
une pour le footer,
et une pour le reste de la page.

Les css du footer et du header sont importées sur chacune des pages du site.

Le problème est que selon les personnes qui bosse sur les pages les CSS sont importées dans un ordre aléatoire avec des problèmes d'écrasement de style.s

Est-ce qu'il ne serait pas préférable de faire une seule feuille que j'appellerais style.css qui aurait cette structure :

/* Styles généraux */

body{}
p{}
h1, h2, h3{}

/* on importe les styles pour le header */ 

@import url(header.css)

/* styles de la page */

#mapage p{}
#mapage span{}

/* on importe les styles pour le footer */ 

@import url(footer.css)

Pour résumer : quelle est la meilleure méthode ?
Modifié par EricLB (03 Aug 2006 - 17:42)

Bonjour,

Au plus simple: définir un découpage de chaque page en 3 section <div id..>, et une convention simple pour les sélecteurs:
- CSS du header: tout sélecteur est de la forme #header foo
- CSS du corps: tout sélecteur est de la forme #content foo
- CSS du footer: tout sélecteur est de la forme #footer foo

L'ordre d'appel des CSS sera alors indifférent, et les risques de conflit seront nuls.
Modifié par Laurent Denis (03 Aug 2006 - 18:12)

Merci pour ta réponse Laurent, mais ça ne répond pas vraiment à mon interrogation. Je bosse sur un site avec beaucoup de pages et il ne ma parait pas possible de faire une seule et unique page pour l'ensemble du site.
Les seuls éléments communs étant les styles du header et du footer (je retiens néanmoins ton conseil pour #header et #footer .

Est-ce qu'il est préférable d'importer les 3 feuilles de styles à la suite dans la page htm ou faire comme je l'ai indiqué dans le code de mon premier post.
L'avantage que j'y vois est que je peux définir des styles communs en premier que je pourrai utiliser dans le header, le contenu de la page et le footer.
Je ne vois pas les inconvénients, mais peut-être n'yen a-t-il pas ?
Modifié par EricLB (03 Aug 2006 - 18:54)

Si tu as certaines feuilles de style qui seront communes à toutes les pages, et d'autres qui ne s'appliqueront qu'à certaines pages du site, tu peux procéder un peu comme tu veux.

1 – soit pour chaque page une série de link (le premier pour les styles communs, que l'on retrouvera sur toutes les pages, et le second voire plus si affinités pour le reste)

<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="rubrique1.css" />

2 – soit une feuille de style pour chaque type de page, dans laquelle tu pourra ajouter les styles spéciques à la page et appeler (règles @import) les feuilles de style des éléments globaux).

Dans un cas comme dans l'autre, mieux vaut ne pas se reposer sur l'ordre d'appel des styles pour déterminer quel style s'appliquera au final. Si tu as besoin d'écraser certains styles, mieux vaut utiliser des sélecteurs avec une priorité plus forte.

Pour ça, la technique indiquée par Laurent me semble être ce qu'il y a de plus fiable.

EricLB a écrit :
Merci pour ta réponse Laurent, mais ça ne répond pas vraiment à mon interrogation. Je bosse sur un site avec beaucoup de pages et il ne ma parait pas possible de faire une seule et unique page pour l'ensemble du site.

On peut très bien « sectoriser » ses sélecteurs en les commençant systématiquement par #nom_de_la_section, que les styles soient dans un seul fichier ou dans plusieurs. À vrai dire, le fait de multiplier les fichiers est plus quelque chose qui sera utile au développeur qu'aux agents utilisateurs. Ça sert surtout à s'y retrouver plus facilement.