CSS, l'âge de raison - commentaires

CSS, l'âge de raison

Bonjour,

Rapide présentation :
J'ai appris à coder le CSS il y a environ 4 ans et demi. Depuis trois ans, je suis web designer pour un gros/lourd site internet où je programme en Less dans un univers Microsoft .NET. Cette entreprise m'a laissé mettre en place ma propre vision de l'organisation des styles avec la performance comme unique jugement. Travailler entouré d'ingénieurs informatiques à forcément influencé ma pratique et ma vision des choses. Depuis un an, je commence à confronter mon expérience à ce qui se fait ailleurs - notamment aux frameworks - et je me rend compte que je suis allé dans la même direction (plutôt bon signe).

Il me semble important dans un premier temps d'évoquer les différentes manières de produire une page web. Les contraintes de production d'une page issue directement d'un fichier HTML seront très différentes d'une page générée par un CMS ou provenant d'un architecture MVC par exemple. La finalité est la même mais pas les besoins en production. Or, là on parle de production.

Une page web peut résulter de l'association d'une dizaine de fichiers écrient en différents langages. Avec une strict application du nommage descriptif, une volonté de changer d'apparence nécessiterait la mobilisation de nombreux ingénieurs (taux horaire fort) pour que chacun passe en revue le code qu'il génère pour fabriquer la page finale.

Il faut bien comprendre que les Frameworks CSS, ayant ré-enclanchés ces questionnements, sont globalement prévus pour une logique d'agence. Création d'un HTML neuf + un Framework CSS = un site. Hop, emballé c'est pesé !
Dans un contexte "chez l'annonceur", certaines pages peuvent avoir nécessitées un lourd développement pour produire le HTML (généré par divers langages). Ce qui est facilement évolutif et à coût maîtrisé, c'est donc le CSS.

Cela ne veut pas dire pour autant qu'il ne faut rien faire, rien changer.
Mais l'emballement actuel à renier tous les principes d'antan est aussi excessif que leur application rigoureuse.
Un compromis structurel est encore à trouver afin de répondre à tous types de cas de la meilleures des manières.

Erwan.

CSS, l'âge de raison

Le truc important c'est de pas trop lier le nom des classes CSS aux contenus, et ça on l'a tous fait depuis le début - c'est même fait dans l'article (.resume). C'est ce qui rend les classes de styles réutilisables. Idéalement on devrait pouvoir modifier l'apparence sans toucher au HTML (ou alors juste aux classes). Mais bon ce niveau d'abstraction est issu de réflexions liés à de gros sites comme Facebook ou Twitter, comme toute chose, c'est à relativiser et à adapter à son propre cas de figure.

Et donc en cours de traduction pour http://pompage.net, les réflexions de Nicolas Gallagher sur l'architecture front qui s'inspirent de BEM (qui lui même a du s'inspirer d'OOCSS) : http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

CSS, l'âge de raison

Les CSS commencent à être de plus en plus gros, mais bon en soit ça reste pas trop lourd.

CSS, l'âge de raison

Pour ce qui est de l'utilité des id, on peut enlever le point "offrir des possibilités de ciblage précis et rapide pour le JavaScript" en utilisant à cette fin les attributs data-* très pratiques :)

En tout cas, vive le pragmatisme, c'est clair !

CSS, l'âge de raison

Ah, quand on m'explique le fin mot, je comprends mieux. Et bien... c'est une coïncidence collector, car je n'avais jamais lu ton article. :)

CSS, l'âge de raison

@Nicolas Hoffmann :

Il y a méprise, je ne parlais pas de la référence à "Object-Oriented CSS", mais d'un article que j'ai écrit il y a plus d'un an, où on peut trouver notamment :

Le but du CSSOO est de manipuler les classes CSS comme des objets à part entière, indépendamment de leur structure HTML. C'est ce que Nicole Sullivan entend dans sa présentation par « Séparer le contenu du contenant ».

En comparant avec ce que tu as écrit précédemment :

manipuler les classes CSS indépendamment de la structure HTML,
séparer le contenant du contenu.

Si c'est une coïncidence, alors elle est collector :)

CSS, l'âge de raison

Belig : certes, je l'ai formulé différemment, et je reconnais que ça peut induire en erreur (j'ai d'ailleurs changé la première phrase). Donc, merci de l'avoir re-expliqué en commentaire. :)

Toutefois :

1 - un minimum de respect : quand tu cites une source, cite-la correctement, j'ai ajouté quelques détails entre parenthèses afin de préciser ma reformulation, et aussi imparfaite soit-elle, les omettre change totalement le sens de cette reformulation.

2- je t'invite à mieux lire les références, il y a un lien nommé "Object-Oriented CSS". Donc avant de citer (mal), il faut lire (bien).

Bonne année ! :)

CSS, l'âge de raison

Salut,

Nicole Sullivan propose une approche orientée objet des CSS : Object-Oriented CSS. Les deux principes sont les suivants :
– manipuler les classes CSS indépendamment de la structure HTML,
– séparer le contenant du contenu.

Les 2 principes du CSSOO sont en réalité de :
– Séparer la structure de l'aspect visuel (= on utilise les classes CSS comme des "objets modulables", exemple avec un ".box" qui engloberait tous les styles cosmétiques d'un modèle de boite : bordure, ombre portée, background, etc.)
– Séparer le contenu du contenant (= le but étant de manipuler ces objets indépendamment de leur structure HTML, exemple ".title" qu'on pourrait utiliser sur un

,

, ...)

Donc :
1 - Quand tu copies une source, un minimum de respect impliquerait de citer celle-ci en référence.
2 - Avant de recopier (mal), il faut comprendre (bien).

Bonne année. :)

CSS, l'âge de raison

Kami : effectivement, un très bon article que voilà, merci ! :)

CSS, l'âge de raison

Bonjour
Article très intéressant. Dans les ressources j'ajouterais un article un peu long, en cours de traduction pour Pompage, intitulé Architecture CSS : http://engineering.appfolio.com/2012/11/16/css-architecture/
Il détaille bien l'importance de produire des CSS prédictibles, réutilisables, maintenables et évolutives.

CSS, l'âge de raison

Merci pour ces réflexions.
Pour ma part, j'ai encore des problèmes avec des noms de variables trop longs (surtout qu'ils fonctionnent en cascade et héritent du parent !), et avec les id trop utilisés au détriment de classes, et qui me poussent à faire des styles genre : #id-a, #id-b {style}

CSS, l'âge de raison - commentaires

CSS, l'âge de raison

CSS, l'âge de raison

CSS, l'âge de raison

CSS, l'âge de raison

CSS, l'âge de raison

CSS, l'âge de raison

CSS, l'âge de raison

CSS, l'âge de raison

,

, ...) Donc : 1 - Quand tu copies une source, un minimum de respect impliquerait de citer celle-ci en référence. 2 - Avant de recopier (mal), il faut comprendre (bien). Bonne année. :)

CSS, l'âge de raison

CSS, l'âge de raison

CSS, l'âge de raison

, ...)

Donc :
1 - Quand tu copies une source, un minimum de respect impliquerait de citer celle-ci en référence.
2 - Avant de recopier (mal), il faut comprendre (bien).

Bonne année. :)