CSS, l'âge de raison - commentaires CSS, l'âge de raison 2015-06-16T13:25:06Z https://openweb.eu.org/articles/css-l-age-de-raison#comment2725 2015-06-16T13:25:06Z <p>Bonjour,</p> <p>Rapide présentation : <br class="autobr" /> 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).</p> <p>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.</p> <p>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.</p> <p>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é !<br class="autobr" /> 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.</p> <p>Cela ne veut pas dire pour autant qu'il ne faut rien faire, rien changer. <br class="autobr" /> Mais l'emballement actuel à renier tous les principes d'antan est aussi excessif que leur application rigoureuse.<br class="autobr" /> Un compromis structurel est encore à trouver afin de répondre à tous types de cas de la meilleures des manières.</p> <p>Erwan.</p> CSS, l'âge de raison 2013-06-10T13:14:09Z https://openweb.eu.org/articles/css-l-age-de-raison#comment1844 2013-06-10T13:14:09Z <p>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.</p> <p>Et donc en cours de traduction pour <a href="http://pompage.net" class="spip_url spip_out auto" rel="nofollow external">http://pompage.net</a>, 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) : <a href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/" class="spip_url spip_out auto" rel="nofollow external">http://nicolasgallagher.com/about-html-semantics-front-end-architecture/</a></p> CSS, l'âge de raison 2013-04-10T21:21:50Z https://openweb.eu.org/articles/css-l-age-de-raison#comment1585 2013-04-10T21:21:50Z <p>Les CSS commencent à être de plus en plus gros, mais bon en soit ça reste pas trop lourd.</p> CSS, l'âge de raison 2013-01-07T16:24:00Z https://openweb.eu.org/articles/css-l-age-de-raison#comment1389 2013-01-07T16:24:00Z <p>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 :)</p> <p>En tout cas, vive le pragmatisme, c'est clair !</p> CSS, l'âge de raison 2013-01-05T08:05:54Z https://openweb.eu.org/articles/css-l-age-de-raison#comment1386 2013-01-05T08:05:54Z <p>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. :)</p> CSS, l'âge de raison 2013-01-04T11:26:55Z https://openweb.eu.org/articles/css-l-age-de-raison#comment1385 2013-01-04T11:26:55Z <p>@Nicolas Hoffmann :</p> <p>Il y a méprise, je ne parlais pas de la référence à "Object-Oriented CSS", mais d'<a href="http://www.design-fluide.com/21-09-2011/le-css-oriente-objet-explique-avec-monsieur-patate/" class="spip_out" rel='nofollow external'>un article</a> que j'ai écrit il y a plus d'un an, où on peut trouver notamment :</p> <blockquote class="spip"> <p><i>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 ».</i></p> </blockquote> <p>En comparant avec ce que tu as écrit précédemment :</p> <blockquote class="spip"> <p><i>manipuler les classes CSS indépendamment de la structure HTML,<br class="autobr" /> séparer le contenant du contenu.</i></p> </blockquote> <p>Si c'est une coïncidence, alors elle est collector :)</p> CSS, l'âge de raison 2013-01-04T08:25:02Z https://openweb.eu.org/articles/css-l-age-de-raison#comment1384 2013-01-04T08:25:02Z <p>Belig : certes, je l'ai <strong>formulé</strong> 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. :)</p> <p>Toutefois :</p> <p>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.</p> <p>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).</p> <p>Bonne année ! :)</p> CSS, l'âge de raison 2013-01-02T09:19:40Z https://openweb.eu.org/articles/css-l-age-de-raison#comment1381 2013-01-02T09:19:40Z <p>Salut,</p> <blockquote class="spip"> <p><i>Nicole Sullivan propose une approche orientée objet des CSS : Object-Oriented CSS. Les deux principes sont les suivants : <br /><img src='https://openweb.eu.org/squelettes-dist/puce.gif' width="8" height="11" class="puce" alt="-" /> manipuler les classes CSS indépendamment de la structure HTML, <br /><img src='https://openweb.eu.org/squelettes-dist/puce.gif' width="8" height="11" class="puce" alt="-" /> séparer le contenant du contenu.</i></p> </blockquote> <p>Les 2 principes du CSSOO sont en réalité de : <br /><img src='https://openweb.eu.org/squelettes-dist/puce.gif' width="8" height="11" class="puce" alt="-" /> 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.) <br /><img src='https://openweb.eu.org/squelettes-dist/puce.gif' width="8" height="11" class="puce" alt="-" /> 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 <h1>, <h2>, ...)</p> <p>Donc :<br class="autobr" /> 1 - Quand tu copies une source, un minimum de respect impliquerait de citer celle-ci en référence.<br class="autobr" /> 2 - Avant de recopier (mal), il faut comprendre (bien).</p> <p>Bonne année. :)</p> CSS, l'âge de raison 2013-01-01T08:43:49Z https://openweb.eu.org/articles/css-l-age-de-raison#comment1376 2013-01-01T08:43:49Z <p>Kami : effectivement, un très bon article que voilà, merci ! :)</p> CSS, l'âge de raison 2012-12-25T16:04:35Z https://openweb.eu.org/articles/css-l-age-de-raison#comment1333 2012-12-25T16:04:35Z <p>Bonjour<br class="autobr" /> Article très intéressant. Dans les ressources j'ajouterais un article un peu long, en cours de traduction pour Pompage, intitulé Architecture CSS : <a href="http://engineering.appfolio.com/2012/11/16/css-architecture/" class="spip_url spip_out auto" rel="nofollow external">http://engineering.appfolio.com/2012/11/16/css-architecture/</a><br class="autobr" /> Il détaille bien l'importance de produire des CSS prédictibles, réutilisables, maintenables et évolutives.</p> CSS, l'âge de raison 2012-12-23T01:23:36Z https://openweb.eu.org/articles/css-l-age-de-raison#comment1327 2012-12-23T01:23:36Z <p>Merci pour ces réflexions.<br class="autobr" /> 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 : <code class="spip_code" dir="ltr">#id-a, #id-b {style}</code></p>