[OK] Gérer efficacement les styles d'une charte graphique

Bonjour tout le monde,

Je travaille actuellement sur un projet qui repose sur une charte graphique plutôt complexe :

* 3 gabarits :
- colonne à gauche / contenu à droite,
- colonne à droite / contenu à gauche,
- colonne à gauche / colonne à droite / contenu au milieu

* Palette de plusieurs couleurs pour les titres, les liens, et les contenus :
- bleu pétant,
- bleu marine,
- jaune,
- gris,
- blanc

* Une dizaine de modèles réutilisables à intégrer au total :
- page type article,
- page type formulaire,
- page type galerie,
- ...
- et bien sûr quelques cas spécifiques (home page, page d'accueil des news, etc.) ...


J'aimerais avoir vos avis concernant la gestion des effets typographiques. Dans un premier temps, et sur les consignes du développeur en charge du projet, j'ai commencé à préparer un jeu de classes prêtes à l'emploi pour les titres et les liens :

.jaune_upp_130 { color:yellow; text-transform:uppercase; font-size:130%; }
.bleu_110 { color:blue; text-transform:uppercase; font-size:110%;
etc. etc. }

Mais après intégration de 3 modèles, je me suis rendu compte que c'était bien parti pour finir en gros b***** (3 pages seulement et j'avais déjà 5 classes pour le jaune, 4 pour le bleu, ...). La charte graphique n'est pas assez "normalisée" (tous les titres que j'ai pu intégrer ont des tailles / hauteurs de ligne / espacements différents).

J'ai donc pensé à une autre méthode :

.jaune { color:yellow; }
.upp { text-transform:uppercase; }
.size_130 { font-size:130%; }

Mais là encore, en plus de pourrir mon code CSS, ça allait également pourrir mon code XHTML (<h2 class="jaune upp size_130 padding_5">). De plus, ces deux techniques présentent un réel inconvénient : si jamais le client pense qu'au final, le lien "jaune" serait mieux en "bleu", toutes les modifications devront se faire dans le code XHTML. Dans l'os la séparation du fond de la forme...

Donc un gros non...

Je suis donc reparti sur quelque chose de plus standard :

/* Jaune */

h2,
div#home_bas h3 { color:yellow; }

/* Bleu*/

div#article h3,
div#news dl dt { color:blue; }

... en réglant individuellement les tailles / espacements.

Mais là encore y a comme un malaise. Sur une page le titre d'un article est en jaune, sur une autre (modèle quasiment similaire) il est bleu...

Qu'en pensez-vous ? Puis-je encore optimiser ? Comment procédez-vous dans vos projets ?
Modifié par BeliG (08 Sep 2009 - 10:41)

Salut,

Je dirais que tu devrais créer une feuille de style avec les styles communs du type styleGeneral.css. Et après de diluer tes styles en différents dossier Gabarit1/Couleurs1.css Gabarit1/Couleurs2.css etc...
Ca te permet de bien compartimenter et d'inclure les feuilles de style relatives, après tu as plusieurs colonnes différenciées c'est surtout au niveau de ta structure html que ça va changer ..

La solution de N-J me semble convenir : factorise le code commun dans un fichier css appelé dans toute les pages et pour chaque page, tu appelles le fichier css se rapportant au gabarit de cette page.

N'oublie pas que tu peux ajouter des classes sur le body afin de savoir sur quel type de gabarit tu te trouves.

Salut,

Je suis du même avis qu'évoqué au dessus, mais j'ajouterai cependant une chose.

Lorsqu'on développe une charte graphique pour un site, on fait en sorte d'harmoniser visuellement les éléments de même type et de même fonction.
Ainsi, un titre de niveau 2 dans le contenu devrait toujours avoir le même aspect dans le contenu, dans tout le site. S'il existe un titre de niveau 2 dans une colonne de navigation par contre, il est tout à fait envisageable qu'il soit différent, tant qu'il est harmonisé dans cette colonne de navigation. Tout cela est fait dans le but de donner des repères visuels forts au visiteur, pour l'aider dans sa navigation.

Dans tous les cas, l'intérêt des CSS étant la factorisation des styles de présentation, s'il y a autant de styles que d'éléments, il est inévitable que le code soit plus lourd, tant au niveau CSS qu'au niveau HTML, et il est aussi inévitable que la maintenance soit lourde par la suite.
Aussi, si tu as trop de changements de styles pour un même élément, je pense qu'il y a une grande défaillance dans le graphisme et l'ergonomie du site, et qu'elle mériterait d'être revue à la simplification.
Modifié par Mikachu (04 Sep 2009 - 13:20)

Bonjour,

Assassiner sauvagement le graphiste est une option.

Bonjour,

Florent V. a écrit :
Bonjour,

Assassiner sauvagement le graphiste est une option.

c'est tentant mais qui fait le graphisme après?

J'ai un site du même type, avec plein de gabarits et des couleurs qui changent selon la rubrique ou l'on se situe. Niveau html j'ai :

- une zone de contenu
- des colonnes de taille diverses que je crée avec 2 div supplémentaires
- des titres et mon logo qui changent de couleur selon la rubrique ou l'on se trouve

Au départ j'ai tout fais à l'arrache ce qui me donnait presque un nouveau morceau de css par page avec une classe en amont sur ma zone de contenu. Ceci, du fait que les pages sont venues se rajouter au fur et à mesure. Et comme tu le soulignes, c'est ingérable.

Ces 2 derniers jour, j'ai tout repris de zéro. Niveau code html, j'ai quelque chose comme ceci :

<div id="contenu">
<!-- si il n y a pas de colonne -->
</div>

ou

<div id="contenu">
<!-- 2 colonne -->
  <div id="colonne_m_g> <!-- un peu babare, colonne moitié gauche -->
  </div>
  <div id="colonne_m_d>
  </div>
</div>

et ceci pour chacune de mes mises en pages.

Côté css, mes niveaux de titre, paragraphes, images et autre élément html sont tous (pré)définis au niveau du bloc de contenu.

Quand la mise en page varie, je rajoute des classes sur mon élément contenu.

<div id="contenu class="fond rubrique">

J'ai 2 classes, une pour mettre un fond, l'autre qui correspond à la rubrique en cours avec laquelle je modifie le style de mes différents éléments prédéfinis pour le contenu.

#contenu1.rubrique #colonne_s_d h3 {
color: #93b90d;
}

L'avantage c'est que même si l'on doit écrire des sélecteurs à rallonge dans la css, le code html lui est toujours le même. On a pas à se demander à quoi sert la classe machinbidule sur le titre de niveau 2.

Si il y a des mises en pages vraiment particulières, j'écris le code en dur dans le html, premièrement parce que le code est impossible à factoriser deuxièmement car le jour ou je n'aurai plus besoin de ces pages, je pourrai la supprimer sans me soucier des styles parasites qui trainent dans ma feuille css.
Modifié par bzh (04 Sep 2009 - 14:33)

Merci pour vos retours rapides

J'ai eu le temps de réfléchir et de re-regarder attentivement mes maquettes.

Il y a des incohérences, c'est certain (à ce sujet je suis entièrement d'accord avec Mikachu sur les problèmes fonctionnels et ergonomiques que cela peut représenter pour un utilisateur).

Mais en y regardant de plus près, les (plus grosses) folies du graphiste concernent particulièrement la homepage et des boites situées dans les colonnes.

J'ai donc pris la décision de :
- séparer les styles de la homepage (je parle des styles qui différent par rapport aux autres pages), un peu comme le disait N-J,
- cibler de façon globale les éléments les plus régulièrement cohérents,
- écraser les styles du point précédent dans le cas où ça ne correspond pas à la maquette (en ciblant plus spécifiquement).

Ça donne quelque chose comme ça :

/* Ciblage des éléments les plus récurrents */

a { text-decoration:none; }
h2 { text-transform:uppercase; }

h2 { color:yellow; }
h3, dt, dt a { color:blue; }

dd.readmore a { color:yellow; }
dd.readmore a:hover { color:blue; }

...

/* Les styles de la home */

div#home h2 { color:blue; }
div#home h3 { color:yellow; }

...

/* Les "incohérences" */

div#article h2 { color:pink; }
div#formulaire h3 { color:purple; }

...

Ça me semble bien, je [Résolu] pas encore au cas où quelqu'un aurait autre chose à ajouter.

@bzh : Ok avec toi, je procède déjà à ce type de séparation de toute façon.

Merci
Modifié par BeliG (04 Sep 2009 - 15:06)