[Résolu] Css structuration et modularité

Bonjour à tous,
J'ai une question sur la structuration et la modularité de mon code.
Quelle est la meilleure approche. Celle avec les mêmes classes que j'utilise par module comme dans l'exemple suivant :

<nav class="menu"></nav>
<div class="[b][#blue]container[/#][/b]">
<!-- commentaire -->
<article class="comment">
<div class="avatar"></avatar>
<div class="[b][#blue]container[/#][/b]"></div>
</article>
<!-- commentaire -->
</div> 

Ou celle avec des identifiants unique :

<nav class="[b]main_menu[/b]"></nav>
<div class="[b]main_container[/b]">
<!-- commentaire -->
<article class="[b]comment[/b]">
<div class="[b]comment_avatar[/b]"></avatar>
<div class="[b]comment_container[/b]"></div>
</article>
<!-- commentaire -->
</div> 

Merci d'avance de vos réponses
Modifié par semantic (20 Sep 2013 - 12:04)

Tout dépend de l'approche du projet.

Si ce sont des classes qui sont amenés à être réutiliser tu peux faire la 1ere méthode, ensuite si tu as besoin de spécifier pour la partie commentaire l'avatar doit ressembler à ceci alors 2eme méthode.
Mais si ta un avatar qui se trouve un autre endroit et qui veut les mêmes spécifités faudra amenagé le .css

Y a des pour et contre de chaque côté. Y a pas de bonne méthode, c'est ce qui te semble le plus judicieux aux moments ou tu bosses sur le site pour le maintenir tranquillement.

Merci beaucoup pour ta réponse rapide.

Jusqu'à présent j'ai utilisé la deuxième méthode mais cette question ma traversé l'esprit et depuis je doute

En fait je souhaite struturer mon code par modules car je trouve ça plus simple et plus maintenable.

Par exemple un module pour les commentaires (que je peux réutiliser dans différents projets ou ailleurs sur le site).
La question implicite est la collusion de noms de classes.

Css gère t'il bien les codes comme ça ?

div.container{
//ici le code de mon conteneur principal
}

article.comment div.container{
//ici le code de mon conteneur commentaire
}

Niveau performance ça a un impact par rapport aux classes avec des identifiants uniques ?

Niveau performance je ne saurais te répondre..

Y a aucun soucis à utiliser l'une des 2 méthodes.
L'impact que tu peux avoir par exemple, si tu utilises les 2 cas en meme temps, c'est que le 2eme prenne le pas sur le 1er car il y a plus d'identifiant de .CSS pur que le 1er.
C'est comme si tu faisais par exemple :

#div .class{font-size:14px;}
.class{font-size:13px;}

Normalement le css qui prend le dessus est la 1ere car il a un ID + Class donc valeur plus forte (normalement..)
Et sinon oui, tu peux réutiliser des classes css, je pense que pour toi, ça serait bien que t'aille faire un tour niveau SASS / LESS / Compass

Si tu cogites à ce genre de css, ça devrait grandement te faciliter la vie.

ça m'a l'air extrêmement intéressant.
J'vais aller lire et faire quelques recherches.
J'viens de lire en diagonale et SASS nécessite Ruby (sauf erreur de ma part). ça m'embête un peu car j'l'ai jamais utilisé et que j'l'ai même jamais installé sur mon serveur perso.
J'vais creuser un peu le sujet et voir si j'peux l'adapter à mes besoin
Merci de ton aide

Bon après réflexion et après avoir cherché un peu j'suis tombé sur des articles intéressants et j'viens de trancher pour les identifiants uniques lorsque les éléments ne se répètent pas.

C'est plus simple pour sélectionner les éléments avec JavaScript.

C'est moins lourd d'écrire

div.comment_container{
//ici le code de mon conteneur commentaire
}

que

article.comment div.container{
//ici le code de mon conteneur commentaire
}

Bref c'est moins fastidieux et ça allège le css
Modifié par semantic (20 Sep 2013 - 15:20)