Discussion :

[Paleo]

Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS. Puis, les projets grossissant, le code CSS est devenu douloureux…

L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus. Je raconte dans cet article mon propre cheminement dans leurs travaux en espérant qu'il sera utile à l'intégrateur Web autant qu'au développeur JavaScript. J'ai cherché en effet une approche adaptée à la fois aux pages et aux applications Web.

Tiré des cours et tutoriels CSS : http://css.developpez.com/cours/ , lire l'article complet : Bonnes pratiques en CSS : BEM et OOCSS

Table des matières :

Introduction
I. OOCSS
II. BEM
III. Pertinence de BEM
III.a. La propreté
III.b. La performance
III.c. La scalability et une architecture par composants
IV. Une syntaxe BEM… jolie !
V. Ingérences transversales et… OOCSS
V.a. À propos d'objets CSS
VI. Cas d'utilisation, partie 1 : HTML
VI.a. Discussion HTML
VII. Cas d'utilisation, partie 2 : CSS avec SASS
VII.a. Discussion CSS
Conclusion

[Muchos]

Merci pour cet article !

Je trouve la méthode BEM très intéressante.

La méthode OOCSS me semble aberrante :

la seule sémantique est obsolète dans la mesure où il nous fait produire du code CSS non-réutilisable.

Selon moi, c'est le contraire ! J'utilise .main-content-title plutôt que .big-blue-title, car mon titre peut changer d'apparence selon la charte, mais sera toujours un titre! En outre, les classes sont aujourd'hui lues par les moteurs de recherche. Leur valeur est donc importante.

[Paleo]

Bonjour,

Selon moi, c'est le contraire ! J'utilise .main-content-title plutôt que .big-blue-title, car mon titre peut changer d'apparence selon la charte, mais sera toujours un titre!

Votre réaction me fait penser que j'ai exagéré pour rien en prenant le gros titre. Je remplace par ".comment-title" vs ".tiny-blue-title" : même argument, moins choquant.

Notez bien que "big(ou tiny)-blue-title" se justifie selon OOCSS à condition qu'il désigne un pattern visuel réutilisable. La FAQ du framework OOCSS explique que la voie sémantique et la voie non-sémantique sont toutes deux valides à condition de rester générique.

Cela dit, votre argumentation est celle des bonnes pratiques des années 2000. Elle est fausse en tout cas dans mon expérience : à chaque fois qu'un client demande une refonte du design, je dois de toute manière refaire aussi le code PHP et le HTML en plus du CSS. Avec une approche (en partie) visuelle les modifications demandées par le client demandent finalement moins de travail.

En outre, les classes sont aujourd'hui lues par les moteurs de recherche. Leur valeur est donc importante.

Auriez-vous une source pour cette info ? C'est la première fois que je lis cela. Il me semble que c'est RDFa la bonne technologie pour préciser plus de sémantique.

[Muchos]

Merci pour votre réponse

Auriez-vous une source pour cette info ?

Et bien non! L'info est répétée sur de nombreux sites spécialisés sans être sourcée

Pour remarque: la dernière spécification HTML du W3C et du WHATWG conseille d'utiliser la valeur des CLASS pour décrire la nature de l'élément plutôt que son apparence.
Néanmoins, unarticle de Nicolas Gallagher (voir 2e paragraphe) estime que cette "bonne pratique" est contre-productive, et ajoute que « les noms de classes transmettent peu ou pas d’information sémantique utile aux machines ».

Peut-être les standards et moi-même sommes vieux jeu Le conseil d'OOCSS sur la dimension claire, générique et sémantique des classes est finalement salutaire; et je me souviens que j'utilise moi-même ponctuellement des classes de ce genre (.floatl, .serif, etc.)

[Paleo]

Merci pour la réponse documentée, la petite phrase du W3C m'avait échappé. Effectivement, on va dire qu'ils sont vieux jeu.

La nuit porte conseil et j'ai retiré le "blue" de "tiny-blue-title" puisque le but n'est vraiment pas de choquer. En fait avec OOCSS on repère des répétitions visuelles puis on leur trouve un nom. Et parfois le pattern s'applique a tellement de cas qu'il est bien difficile de le rattacher à un nommage sémantique, alors on se rabat sur ce qu'on voit : un petit titre bleu.

[black-hawk-down]

Merci beaucoup pour cet article. Il tombe à point nommé, je comptais justement faire du refactoring sur mon CSS afin de tout bien identifier clairement et cherchais une méthode simple à mettre en place. Bah c'est fait, merci

[Bisûnûrs]

La nuit porte conseil et j'ai retiré le "blue" de "tiny-blue-title" puisque le but n'est vraiment pas de choquer. En fait avec OOCSS on repère des répétitions visuelles puis on leur trouve un nom. Et parfois le pattern s'applique a tellement de cas qu'il est bien difficile de le rattacher à un nommage sémantique, alors on se rabat sur ce qu'on voit : un petit titre bleu.

Et tout dépend du besoin. Chaque cas d'utilisation doit être réfléchit dans le contexte du développement du site.