18041 sujets

Questions générales et questions de débutants

Une feuille CSS pour plusieurs pages WEB .

Bonjour à tous,

Mon site prend forme et les pages se multiplient...
Une serie de pages est a priori fondée sur la même feuille CSS.
Toutefois des detites différences existent.
Alors les styles s'empilent dans la section body ...

La question se pose de savoir si je crée dans ma feuille CSS autant de styles qu'il y en a dans les diverses pages, en les identifiant, et dans ce cas la feuille CSS grossit ou bien de créer un dossier contenant la page WEB et sa feuille CSS, ou une autre solution que je ne connais pas.
Quelle est la bonne pratique.

J'ai cherché ce sujet sur le forum sans le trouver.

Merci d'avance à tous.

Et surtout que ce site continue. C'est super.
Modifié par lenul60 (23 Jan 2010 - 18:21)
Bonjour,

Tout dépend du site, du degré de différence entre les différentes sections, etc.

La première chose à analyser, c'est le nombre de mise en page totalement singulières. Est-ce que tu as plusieurs mises en pages complètement différentes (et donc, du point de vue du visiteur, plusieurs sites), ou bien s'agit-il de différences dans la mise en page de contenus, de positionnement de certains blocs, bref de variations?

Ensuite, pour chaque design identifié (et s'il s'agit d'un site unique il ne devrait y en avoir qu'un), il faut répertorier le nombre de pages-type. Ça donne souvent une liste comme ceci: page d'accueil, index de rubrique, page de texte simple, index de la rubrique actualités (qui diverge de l'index de rubrique), page d'actualité, etc. Un site très simple aura souvent trois ou quatre pages-type. J'ai déjà travaillé sur un site qui en avait 40.

Une fois qu'on a une liste des pages-type, il faut bien identifier:
- les styles "de base", notamment pour le texte (paragraphes, titres, listes, citations, liens, couleurs, etc.);
- ce qui ressort du design global (conteneur global, en-tête, pied de page, navigation...);
- les éléments de design qui reviennent sur une partie des pages (la mise en forme d'un bloc, la mise en forme du texte et des illustrations dans le contexte de ce bloc...);
- ce qui est spécifique à une page-type.

Pour un site de taille moyenne, j'aboutis en général à une collection de feuilles de styles pouvant faire jusqu'à 500 lignes chacune, comme ceci:
- base.css
- global.css
- content-generic.css
- content-specific.css

Ensuite, je récupère le contenu de ces feuilles de styles et je les compile en une seule feuille de styles nommée "all.css", et au final dans mes pages HTML j'ai juste ceci:
<head>
  ...
  <link rel="stylesheet" href="/styles/all.css">
</head>

En cours d'écriture des feuilles de styles, pour faire simple, j'ai dans mon fichier all.css des règles @import qui me permettent de récupérer les différentes feuilles de style:
@import "base.css";
@import "global.css";
@import "content-generic.css";
@import "content-specific.css";


Ce qui permet d'appliquer à une page HTML certains styles plutôt que d'autres, ce sont les identifiants et les classe que l'on utilise.
Un grand merci à toi. Je pense avoir compris. Je mets en oeuvre et reviens vers toi si pb.
Et à tous ceux qui font ce site.. continuez.
Sujet clos
Aller à