Bonjour, comme vous l'avez peut-être vu dans mes questions précédentes, je suis un débutant en développement Web.
J'ai un problème méthodologique et je me demande jusqu'à quel point il est "normal".

Plutôt que d'expliquer dans les détails, je vais poser des questions autour de mon problème :

1) Dans quelle mesure est-il normal que lorsque j'essaie de styler une page html en css je sois éventuellement amené à modifier le code html ?

2) Y a-t-il des grandes méthodes de codage html qui permettent, une fois le code (html) établi d'obtenir n'importe quelle apparence via css sans aller javascripter pour déplacer des éléments du DOM ?
Modifié par BaygonV (12 Jul 2015 - 18:04)
Administrateur
Bonjour,

0) Il est normal que tu te poses ces questions, c'est bon signe je suppose Smiley smile

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à Smiley confus

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)
Merci de cette longue réponse ainsi que du lien de fin de post. Je vais lire, relire et me documenter sur tout cela jusqu'à ce que je comprenne tout.

Je ne sais pas vraiment si mon "problème" est résolu du coup je ne modifie pas le statut de ce fil pour l'instant car je risque de venir poser encore des questions idiotes.

Je reviendrai ici pour poser des questions d'éclaircissement si jamais mes recherches ne me suffisent pas.