Bonjour,
0) Il est normal que tu te poses ces questions, c'est bon signe je suppose
1) La séparation du fond et de la forme est un objectif louable mais une séparation
stricte est illusoire : il y a d'autres contraintes dans un projet et il va falloir faire des compromis.
En stylant via des classes et pas les éléments eux-mêmes (ne plus styler h2 ou section mais la/les classes portées par ces éléments), tu peux ajouter des div et ne rien casser ou maxi 1 ou 2 points vite réparés… sans que ça vire à la
divite avec imbrication de div sur 5 niveaux, un peu de mesure !
Il n'y a que 2 exemples dûs à CSS qui me viennent en tête mais il y a sûrement bien d'autres causes extérieures : en utilisant la mise en page CSS en tableau (display: table(-*)),
aucun rapport avec l'élément table à part l'apparence bien entendu) ou flexbox, il y a une contrainte sur le code HTML : les éléments en display: table-cell doivent être frères et idem avec les
flex-items.
À force, avec l'expérience de projets de quelques dizaines de gabarits et au moment d'entamer un autre encore plus gros projet, je ne raisonne plus qu'en terme de "ligne" : qu'est-ce qui est sur la même ligne (en résolution "desktop") et je pars de là avec KNACSS (.row, .line, etc). Deux ou trois cents pages plus tard, ça fonctionne très bien (
edit: ou plutôt on y serait jamais arrivé si on avait pas fait comme ça).
Si tu as besoin de modifier un peu trop souvent le code HTML dans les composants (les blocs) de ta page, là il y a un souci d'harmonisation : un type de contenu peut avoir quelques variantes mais pas une demie-douzaine non plus... Faut rationnaliser là
2) Discuter avec ton webdesigner s'il y en a un, pour commencer. "Tes 2 designs là, ils m'obligent à faire ça" "Pourquoi ce composant qui semble similaire est autant différent entre ces 2 gabarits ?"
Raisonner en terme de blocs (composants) indépendants les uns des autres ; leur largeur et agencement sont imposés par la mise en page de chaque gabarit (et ce pour chaque point de rupture - RWD) mais intrinséquement, chaque composant ne "sait" pas quelle largeur il fait. auto ou 100% quoi et à l'intérieur il n'y a aucune largeur en px de définie.
Ne pas avoir peur de rajouter des clearfix et si nécessaire un div même si là tout de suite ça ne sert à rien, si tu l'estimes nécessaire. C'est pas comme si le client ou toi dans 3 mois allait ajouter un nouveau bloc qui allait tout casser. La robustesse d'un design mérite bien ça.
Et OOCSS et/ou SMACSS et/ou ITCSS (SUITCSS, etc Atomic CSS est par contre un peu extrême pour moi, mais je travaille pas chez Yahoo! non plus... J'ai les mêmes problèmes mais peut-être pas avec la même échelle) avec ou sans la notation BEM sont des conventions de travail et de nommage qui permettent cela.
On rencontrait tellement de fois les mêmes problématiques qu'à force Raphaël a créé un mini-framework pour ce genre de rengaine d'intégrateur :
https://github.com/raphaelgoetter/KNACSS/blob/master/doc/02b-layout-positionnement.md
EDIT: j'aurais fait plus court si je m'étais souvenu de ces
10 articles en français de N. Hoffmann sur OpenWeb
Modifié par Felipe (13 Jul 2015 - 11:27)