Après avoir travaillé sur différents projets et différentes taille, force est de constater que les feuilles de style sont particulièrement difficile à formaliser, mais on va essayer. A mon avis il faudrait utiliser l'importation de feuilles de style :

   * styles.css
   * layout.css
   * GBstyles.css

Dans le HTML on appelle styles.css au début de cette feuille on importe layout.css et BGstyle.css

@import "layout.css";
@import "BGstyles.css";

layout.css définit la mise en forme général du site, le squelette, le positionnement des principaux éléments :

   *  #page
   *  #header
   * #main
   * #colonneGauche
   * #colonneDroite
   * #contenu
   *  #footer

GBstyles.css définit les styles utilisés par les clients à travers geniebuilder pour ne pas les confondre avec ceux utilisés par le developpement, pour les retrouver facilement et ne pas surchager la feuille de style principale. Utilisez des noms facile à comprendre par le client :

   *  .texteBleu
   *  .texteRouge
   *  .texteBleuPlus1
   *  .texteRougePLus1
   * .texteRougePlus2

styles.css définit les styles généraux : Contrairement a GBstyles.css dans cette feuille on nommera les styles selon leur utilisation, leur localisation:

   * .important {}
   * .titreParagraphe {}
   * .menuCategorie {}
Ne pas indiquer ni la couleur, ni la taille ni autres choses qui pourrait être modifiés à la demande du client  ou dans le cadre d'une évolution du site sinon cela deviendrait incompréensible ( Louis je te vois sourire ... )
 .texterouge {} qui serait amené à devenir du texte bleu amenerait soit à un non-sens soit à modifier aussi  le code HTML (la feuille de styles n'aurait donc plus d'intérêt)

/*******Styles généraux*********
**********************************/

En général il faut penser à déclarer les classes suivantes qui peuvent être utilisées partout. Elles pourront être
retrouvées instinctivement lors des futurs developpements.
   * .spacer {clear:both;}
   * .center {text-align:center;}
   * .left { texte-align:left;}
   * .right {text-align:right;}
   * (Gael j'en oublie ?)

/*****Textes et styles généraux****
*************************************/

Ici on déclare les styles des titres, des liens, du texte générique pour couvrir l'ensemble du site et ainsi définir une base générale:

   * /* titre de page */
      H1 {}
   *  /* titre de paragraphe */
      H2 {}
   * /* titre encart bleu */
      H3 {}
   *  /* texte du site */
      body {}
   * /* lien generique*/
      a {}
   *  /* texte generique */
      .textgenerique {}
   * /* texte important */
      .textimportant {}
   * /* premiere couleur de fond de tableau */
      .fondtableau1 {}
   * /* deuxieme couleur de fond de tableau */
      .fondtableau2 {}

Ensuite on commence à définir les styles du site. Pensez à séparer les styles par conteneurs: /************Header**************
***********************************/ /************Main*****************
***********************************/

/************Footer***************
***********************************/

Il faut réussir à definir l'utilisation des différentes classes avant de les définir :

   *   #page #colonneGauche .cadre a {}

Si on veut une définition spécifique d'un élément bien particulier, ici un élément de la classe .cadre qui se trouve dans l'élément #colonneGauche qui lui même se trouve dans l'élément #page. ou

   * .cadre a {}

Si l'élément de classe .cadre est utilisé plusieurs fois dans le site à divers endroit. Là aussi classez les styles selon une hiérarchie de conteneur/contenu

   * #page #colonneGauche .cadre {}
   * #page #colonneGauche .cadre p {}
   * #page #colonneGauche .cadre a {}
   * #page #colonneGauche form {}
   * #page #colonneGauche form input .text {}
   * #page #colonneGauche form input .btn {}
   * #page #colonneGauche form label {}
   * #page #main .titre {}
   * #page #main p {}
   * #footer a {}
   * #footer p {}

Bien sur un peu de commentaire est le bienvenue (toujours selon une hiérarchie)

/************Main*****************
***********************************/

/*colonne gauche */

/* cadre */

Pour alléger la feuille de styles on peut reunir la définition de styless identiques :

   * #colonneGauche p,
   * #colonneGauche label,
   * #colonneGauche input {}

Seulement il faut éviter de déclarer de cette facon des styles trop éloignés :

   * #colonneGauche p,
   * #footer span,
   * #menu .desc {}

Il vaut mieux dupliquer ces styles à des endroits différents de la feuille de styles sinon on ne s'y retrouvera pas J'attend donc vos commentaires et je ferais les changements au fur et à mesure.