L’orthogonalité en CSS

Openweb.eu.org > Articles  > L’orthogonalité en CSS

Abstract

Dans l’article précédent, nous avons rappelé le concept de séparation structure/présentation.

Toutefois ce principe n’est en fait qu’un sous-principe d’un ensemble plus vaste qui s’appelle l’orthogonalité.

Article

Définition

En mathématiques, l’orthogonalité se définit ainsi : par exemple dans un repère à deux dimensions, les composantes du repère sont orthogonales, c’est-à-dire qu’il est impossible d’exprimer l’une en fonction de l’autre. Pour ceux qui ont fait des mathématiques plus avancées, on appelle cela l’indépendance linéaire, c’est-à-dire qu’aucune des composantes ne peut être une combinaison des autres.

Pour ce qui nous intéresse, à savoir les sites internet, la métaphore donne une bonne idée de l’orthogonalité, néanmoins ce n’est pas exactement cela. sourire

Il faut plus comprendre le concept de l’orthogonalité comme la capacité des diverses technologies à fonctionner ensemble sans se télescoper mutuellement, comprenez sans que l’une marche sur les plates-bandes des autres.

Nous avons en quelque sorte 3 donjons :

  • la structure (le HTML) ;
  • la présentation (les CSS) ;
  • l’interactivité (le JavaScript).

Dans ce château fort qu’est un site internet, ces trois donjons doivent être capables de pouvoir communiquer ensemble par diverses passerelles. Dans l’article précédent, nous avons étudié comment le HTML pouvait communiquer avec CSS, profitons-en pour aller plus loin désormais !

L’orthogonalité vue des CSS

Comme cette série d’articles concerne CSS, nous nous en tiendrons à étudier comment un concepteur de CSS peut permettre de respecter ce principe d’orthogonalité.

Par exemple, permettre depuis les CSS autant de souplesse possible pour le HTML est un premier pas vers le principe d’orthogonalité – ce dont nous avons parlé dans l’article précédent : éviter un trop fort couplage entre la CSS et la structure HTML.

Si le HTML offre des classes et des id pour permettre d’attacher des styles à des éléments, les CSS doivent en faire de même pour permettre à JavaScript d’effectuer son travail en toute indépendance.

On parle souvent d’attacher des styles à HTML via JavaScript, mais en fait, on doit attacher des classes CSS à HTML via JavaScript (et non directement des styles).

Partons d’un exemple : imaginons un module ayant plusieurs états. La CSS devra contenir les styles du module ainsi que les styles des différents états de ce module. Dans un menu en accordéon, chaque menu doit pouvoir avoir deux états, par exemple .is-opened et .is-closed (ouvert et fermé).

En quelque sorte, le développeur des feuilles de style doit offrir une couche d’abstraction au développeur JavaScript. Ainsi ce dernier n’aura même pas à se poser de questions quand il ajoutera la couche d’interactivité, il manipulera les différents « états » via les classes que le concepteur de la CSS aura mis à sa disposition. Et bien entendu, le développeur des CSS s’arrangera pour que ces états soient prioritaires par rapport aux styles par défaut du module.

Si ces styles devaient changer, cela n’impactera pas le développeur JavaScript mais uniquement le développeur des feuilles de style. En procédant ainsi, les tâches sont mieux cloisonnées, et paradoxalement elles communiqueront mieux.

Pour prendre une analogie, c’est comme en programmation objet : quand on crée un objet, on doit offrir des méthodes pour le manipuler. Le concepteur de feuilles de style doit en faire de même.

Une évidence qualitative, mais pas seulement

Si vous doutez de l’importance du concept d’orthogonalité, prenons au hasard quelques bonnes pratiques dans les référentiels Opquast :

Elles n’évoquent ni plus ni moins que le concept d’orthogonalité (entre autres bénéfices : accessibilité, sémantique, etc.). Les deux premières indiquent de ne pas utiliser HTML pour faire ce qui incombe à CSS. La troisième en est le pendant inverse : ne pas utiliser CSS pour générer du contenu HTML. La dernière indique que JavaScript ne doit pas faire le travail de CSS.

Ce concept d’orthogonalité prend toute son importance lors du travail en équipe : comme cela a été expliqué en exemple lors du paragraphe précédent, il est capital que chaque intervenant puisse effectuer son travail de manière aussi indépendante que possible des autres.

Vous pourriez nous faire remarquer que le développeur front-end s’occupe souvent du HTML et des CSS en même temps. Certes c’est souvent le cas… au moment de la conception des templates. Après, le HTML peut être remanié par le développeur back-end ou simplement par des contributeurs via un CMS. Et bien entendu, ces derniers peuvent faire des choix légèrement différents (!) de ceux du template de base. Autrement dit, autant avoir anticipé autant que possible ces « écarts », et le concept de l’orthogonalité vous aidera à le faire.

Ce concept peut même être un critère de sélection quand on doit choisir un plugin JavaScript – jQuery notamment : sa capacité à ne pas insérer ni manipuler des styles en ligne peut être un gage d’extensibilité… et de propreté.

Aparté

Vous pourriez nous rétorquer que l’interactivité a quelques chevauchements entre JavaScript et CSS, notamment via les animations CSS. Certes, il est possible de faire par exemple en JavaScript quelque chose qui est faisable via CSS. C’est même parfois souhaitable surtout quand on a affaire à des navigateurs anciens qui ne permettent pas d’utiliser les animations CSS.

Qu’à cela ne tienne, le principe reste valable : les animations de pure présentation doivent rester de l’ordre des feuilles de styles. CSS a énormément progressé dans ses capacités d’animation. Si vous en doutez, regardez un des derniers thèmes du CSS Zen Garden nommé Steel.

Les concepts de dégradation gracieuse ou d’amélioration progressive ont également progressé côté acceptation chez les clients, ce qui peut permettre d’éviter d’utiliser des solutions de repli (fallbacks en anglais) en JavaScript pour des choses qui pourraient être faites via les feuilles de style.

Ajoutons à cela que les animations CSS bénéficient en prime de l’accélération matérielle, ce qui peut être moins évident pour du code JavaScript. On préfèrera donc se tourner vers ces dernières quand c’est possible, ce qui allègera d’autant le navigateur et son moteur JavaScript.

Références, compléments

Note

Cet article fait partie de la série « Grands principes de construction moderne de CSS ».

À propos de cet article

  • Openweb.eu.org
  • Cet article existe aussi en français : Orthogonality with CSS
  • Profil : Débutant, Expert
  • Technologie : CSS
  • Thème : Méthodes, Qualité, Structure
  • Auteur :
  • Publié le :
  • Mise à jour : 2 mai 2014
  • 2 commentaires

Vos commentaires

  • Simonney Le 6 mai 2014 à 11:51

    Merci Nicolas,
    cette série d’articles est passionnante. J’attends la suite avec impatience

  • Nicolas Hoffmann Le 7 novembre 2014 à 22:05

    Merci à vous pour ce message sourire

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom