Retour sur Paris-Web 2009 : CSS orientées objet par Nicole Sullivan
Je précise d'emblée que ces propos n'engagent que moi et ne sont que mes réflexions suite à l'édition 2009 de Paris-Web. J'ai eu la chance de pouvoir assister à cette série de conférences et j'ai simplement envie de revenir sur certaines d'entre-elles. Ce n'est pas dans l'ordre, mais je vais commencer par
OOCSS : Les CSS Orientées Objet / Paris-Web 2009
Nicole Sullivan (Consultante Indépendante travaillant entre autre pour FaceBook)
Je ne vais pas refaire la conférence pour vous, d'autant que les slides sont assez explicites et se passeraient presque de commentaires extérieurs (en anglais).
N. Sullivan part du constat que si les feuilles de style s'apparentent à du code (je dis cela au risque de choquer les vrais développeurs, ceux qui font du java, du C etc.), la différence s'arrête très vite :
- Les développeurs ré-emploient des bouts de codes d'une application à l'autre, mais c'est extrêmement rare que cela se produise avec des feuilles de style.
- La plupart des langages ont développé des méthodologies qui permettent au code de rester le plus stable possible et ce malgré un nombre élevé de collaborateurs. Hors il suffit de confier quelques secondes votre feuille de style à un tiers incompétent pour que votre site "tombe" en un minimum de temps.
Alors que se passe t'il avec les CSS ?
Comment leur faire eux aussi passer ce cap de l'industrialisation que les autres technologies ont pu franchir?
Quelles sont les solutions ? Voici les questions auxquelles Nicole Sullivan veut essayer de donner une réponse.
OOCSS : Object Oriented Cascading Style Sheets
Tout de suite les grands mots !
D'elle même Nicole Sullivan précise qu'il ne faut pas chercher à pousser l'analogie jusqu'au bout, par rapport à une définition stricte de la programmation orientée objet ou POO appliquée aux CSS.
S'il fallait emprunter 2 concepts à la POO, se seraient
- Modularité
- Maintenance
Une mise en pratique à l'aide d'un framework qui se propose d'appliquer ces principes.
Je n'en dis pas plus parce qu'il faudrait d'abord que je le teste vraiment à fond et puis parce que c'est très bien documenté (en anglais).
L'idée c'est que comme en POO, il y a des classes et que plutôt que de chercher à les modifier, mieux vaut les étendre.
Nous avons donc une classe page qui peut être étendue avec fluid, liquid etc.
C'est très séduisant et la démo faite "en direct" lors de la conférence l'était tout autant.
Il y a quand même des choses qui ont fait bondir l'assemblée (moi y compris), comme cette volonté de vouloir créer des classes pour les headings qui donnent quelque chose comme :
<h3 class="h6">Pour un heading de niveau 3 mais qui devrait graphiquement prendre peu d'importance</h3>ou<h6 class="h3">Un heading de niveau 6 mais qui doit graphiquement en imposer un peu plus...</h6>
Je ne vous raconte pas les réactions de la salle... Mais pourquoi vouloir utiliser h1 à h6 en classes ??? Pourquoi ne pas écrire
<h3 class="monstyle">...</h3>
à la place ? L'auteur nous a dit en pratique que reprendre cette nomenclature donnait de meilleurs résultats et que tout le monde la comprenait et savait à quoi cela correspondait sans forcément regarder la feuille de style dans le détail...
Où comment retourner à son avantage la mauvaise compréhension habituelle des débutants qui mettent du h1 pour écrire en gros et du h6 pour écrire en tout petit ? C'est peut-être le secret?
Deux autres points m'ont marqué (d'autant plus que d'autres conférenciers, dont certains j'imagine en total désaccord avec l'approche OOCSS, en ont parlé).
- Le premier est l'omniprésence des Grids Layout comme c'est la mode depuis quelques temps : http://www.blueprintcss.org/ ou encore http://960.gs/ pour les plus connus.
- Le second est l'utilisation là aussi systématique d'une feuille de style reset.css, par exemple : http://developer.yahoo.com/yui/reset/
Les 2 me semblaient assez étonnants de la part de pointures du design que j'aurais plutôt imaginé nous encourager à développer nos propre outils. Pas besoin de ré-inventer la roue... Même pour eux, alors je pense que je vais m'autoriser à ce genre de petites aides.
Et si on allait plus loin ?
A vrai dire, j'ai voulu assister à cette conférence car le titre était déjà évocateur pour moi. J'avais déjà lu plusieurs articles sur l'art et la manière de pallier certaines insuffisances (réelles ou supposées) des feuilles de style :
- pouvoir introduire des variables dans les CSS, gérer une palette de couleurs à un seul endroit et ne plus s'occuper de chercher où on a oublié de remplacer un code hexadécimal par un autre...
- introduire, toujours par analogie avec la POO, l'héritage. Définir par exemple, un style de bordure (et écrire une bonne fois pour toute chaque définition, une pour webkit, une pour mozilla, etc.) et pouvoir simplement l'appliquer à certains éléments sans tout se retaper à chaque fois...
- pousser le concept un peu plus loin et rajouter des arguments. La classe border(5px) donnerait une bordure de 5px, mais border(10px) donnerait... enfin vous avez compris!
- faire des calculs directement sur la feuille de style. Je pense notamment à la nouvelle gestion des couleurs introduite par CSS3, pouvoir retrancher une certaine valeur fixe à la description d'une couleur et altérer ainsi certains aspects graphiques de façon cohérente sur l'ensemble d'un site (plus ou moins de saturation, de transparence, etc.).
Evidemment les feuilles de styles ne savent pas faire cela toutes seules et il faut passer par un format intermédiaire, interprété par un vrai langage de programmation (historiquement le premier essai a été fait avec Ruby, mais il y en a un depuis peu en PHP)
Ces outils permettent aussi de compresser le fichier CSS final, gèrent et facilitent l'utilisation des frameworks cités plus hauts. C'est sans fin et c'est très puissant !
Pour en revenir à cette conférence, je pensais qu'il serait questions de ce genre d'outils hybrides et non pas d'une solution s'appuyant sur ce qu'il était déjà possible de faire (et c'est très élégant).
J'ai interrogé brièvement N. Sullivan entre deux conférences sur ce qu'elle pensait de ces nouveaux outils et son retour était plutôt négatif et que pour le coup, ce serait rajouter un peu plus de complexité et revenir aux fameux spaghettis de code dont elle parlait dans sa présentation.
Mais le vers est déjà dans le fruit en ce qui me concerne et là aussi j'ai surtout besoin de mettre les mains dans le cambouis et de voir ce que je pourrai en tirer !
Crédits photographiques : Yannick Croissant.
