[CSS][HTML] Un peu d'ordre dans tout ça

Salut,

J'essaye de rendre conforme aux standards du WEB et clarifier un site WEB.

Je bute sur certaines choses concernant surtout l'organisation.

Au début, j'ai démarré ce projet surtout pour apprendre à coder en PHP/SQL/HTML.
J'utilisais des <table> pour la mise en page. Les feuilles de style étaient très basiques (je les évitais).

J'ai ensuite revu le design et essayé de me pencher sur le CSS.

J'ai plus mis un gros bordel qu'autre chose...

En gros j'appliquais une classe CSS avec couleur/image de fond et je réglais les padding margin et tout le tralala directement dans la balise HTML style.

Ce qui par exemple, pourrait donner :

CSS
.unDiv {
    border: 1px #FFFFFF solid;
}

HTML
<div style="padding: 10px; margin: 10px" class="unDiv"></div>

Ce n'est pas pratique.



J'essaye maintenant de revoir le skin, mais, il sagit d'un forum composé d'une multitude de modules.

J'ai beaucoup d'éléments formant la page et je voudrais qu'elle soit le plus facilement personnalisable.
Disons que le but serait d'arriver à pouvoir personnaliser le skin depuis sa feuilles de style. De manière à ce que l'on puisses revoir le design en ne touchant à quasiment aucune ligne de code HTML.

D'après ce que je lis sur ce site, ça semble possible, dans la limite de l'agencement du code HTML.

Le forum ne peut comporter qu'une seule feuille de style pour le moment étant donné qu'elle n'est pas attachée à son module et qu'elle est compilée à la vollée.

Le fait d'inclure les marges et la plus part des attributs CSS dans la balise HTML me permettait de réduire la feuille de styles, mais je trouve ce système bordélique et pas du tout pratique du moment que l'on veut revoir le design.

Je compte repartir sur d'autres bases liant chaque élément à une classe et en mettant le moins possible d'attributs dans la balise.

J'ai appliqué cette méthode sur une toute petite partie du forum : la barre de navigation/connexion.

Voici ce que ça donne :

CSS
/*************************************************
topBar
*************************************************/

.topBarRoot {
    overflow: hidden;
	width: 100%;
	min-height: 100px;
	border: 1px solid #8a98eb;
	background: #e7edff url({directory}images/blue/postBackground.png) repeat-x;
}

.topBarNav {
	float: right;
	width: auto;
	padding: 4px;
}

.topBarTime {
	float: right;
	font-size: 10px;
	font-weight: bold;
	padding: 4px 10px 4px 4px;
}

/* Logout/Logout ********************************/

.topBarLogout, .topBarLogin {
	float: right;
	width: 200px;
	font-size: 10px;
}

.topBarLogoutUserName, .topBarLoginUserName, .topBarLogoutAvatar {
	text-align: center;
	padding: 4px;
}

.topBarLogoutOptions, .topBarLoginOptions {
	padding: 4px;
}

.topBarLoginOptionsUL {
	padding: 0px;
	list-style: none;	
}

.topBarLoginOptionsLI {
	padding: 2px;
}

.topBarLoginForm {
	padding: 0px 0px 4px 0px;
}

.topBarLoginFormUserName, .topBarLoginFormPass {
	width: 75px;
}

.topBarLoginFormSubmit {
	
}

HTML

<div class="topBarRoot">
  <div class="topBarNav">
    <div class="topBarLogout">
      <div class="topBarLogoutUserName"><strong>Connecté : </strong>abcd</div>
      <div class="topBarLogoutOptions"><a href="http://www.vtuning.net/index.php?p=login&amp;mode=logout">Se déconnecter</a></div>
      <div class="topBarLogoutAvatar"><img src="http://www.vtuning.net/images/avatars/uploads/5e65fe4a006fd5bac5ccda7692b1f3ce47fce7a291e72.jpg" height="88.996763754045" width="125" /></div>
    </div>
    <div class="topBarTime" id="timeBox">Vendredi 11 Avril 2008 00:42:59</div>
    <span class="t3">&nbsp;&nbsp;</span>
    <a href="http://www.vtuning.net/" title="" class="navText"><span class="t3">Forum</span></a><br />
    <span class="t3">&nbsp;&nbsp;</span>
    <span class="t3">&nbsp;&nbsp;</span>
    <img src="http://www.vtuning.net/skins/base/images/navSpacer.png" alt="NavSpacer" title="NavSpacer" />
    <a href="http://www.vtuning.net/index.html" title="" class="navTextSelected"><span class="t1"><b>forum</b></span></a><br />
  </div>
</div>

Comme vous pouvez le voir, presque tout devient réglable depuis la feuille de styles, c'est ce que je cherche. Mais si je fais ça sur la plus part des modules, la feuille de styles risque de devenir énorme.

Il faudrait trouver l'équilibre entre le nombre de classes dans la feuille de styles et le nombre d'arguments intégrés dans la balise HTML.

Je pense partir sur des classes personnelles à chaque élément de la structure du forum et des modules principaux comme les forums, les topics, les posts...
Ensuite je pense creer des classes "partagées" avec les modules secondaires comme les messages privés ou la gestion des groupes en leur créant bien sur une classe spécifique si ils ont des besoins spéciaux.

Si vous voulez vous faire une idée, voici l'adresse ou le forum est en test : http://www.vtuning.net/index.html

Pourriez vous me conseiller.

Merci de m'excuser si tout ce dont je parle vous semble flou, je n'arrive pas trop à m'exprimer sur ce sujet, je ne le connais pas assez pour être à l'aise.

Merci d'avance pour vos réponses.

A+

Up,

Merci.