Tag: OO
CSS Orienté Objet
par Loïc le Mercredi 29/04/2009 à 12:42, dans CSS, HTML, POO
Via un billet posté sur le blog de Rebecca Murphey (découverte grâce au lancement de JSMag), je suis tombé sur une présentation de Nicole Sullivan concernant les bonnes pratiques à adopter lors du développement de la couche CSS d’un site, pratiques qu’on pourrait plus ou moins assimiler à de la conception orientée objet appliquée aux CSS.
Ce qu’il faut en retenir (ce que j’en ai retenu)
L’un des principaux problèmes des feuilles de styles est leur tendance à gonfler, gonfler, gonfler ce qui les rend plus coûteuse en bande passante mais aussi en maintenabilité (sans compter les risques liés aux styles s’écrasant mutuellement).
La raison est relativement simple : il n’est pas forcément évident de réutiliser des styles déjà existants. On a tendance à concevoir les règles CSS par rapport au contenu d’une page, éventuellement à réutiliser ce qui a été fait sur une page similaire si les similitudes sont flagrantes.
Nicole recommande une approche bien plus pérenne : séparer la structure et le design (ce qui ne veut pas uniquement dire avoir une feuille de style externe mais se baser sur des classes CSS et non sur des balises particulières) et séparer le contenu du contenant.
En fait, il vaut voir une bonne conception CSS comme un assemblage de Legos : commencez par créer votre collection de briques. Une fois que la collection de brique est prête, vous pouvez commencer à créer vos pages, autrement dit vous pouvez commencer à assembler vos briques ensemble pour aboutir au résultat graphique attendu.
Les 10 best practices qu’elle cite :
- Créez une bibliothèque de composants
- Utilisez des styles en accord avec la sémantique
- Concevez des modules avec un fond transparent
- Soyez flexible
- Apprenez à aimer les grilles
- Minimisez l’emploi des sélecteurs
- Séparez la structure et le design
- Séparer le contenu et le contenant
- Etendez les objets en appliquant plusieurs classes sur un élément HTML
- Utilisez des feuilles de style de reset et de gestion des polices
Et les 9 choses à éviter :
- Evitez les styles dépendants de l’endroit où vous vous trouvez sur le site
- Evitez de créer des styles qui dépendent des balises utilisées
- Limitez l’utilisation d’IDs : ils doivent se limiter aux zones principales, pour le reste utilisez des classes
- Fuyez les coins arrondis ou les ombres appliqués par-dessus des fonds non-unis (image de fond ou dégradé).
- Evitez de faire un sprite contenant toutes vos images, à moins que vous ayez qu’un faible nombre de pages
- Tentez d’éviter les alignements sur la hauteur
- Le texte c’est du texte, pas une image contenant du texte
- Evitez la redondance
- Evitez l’optimisation prématurée
Maintenant si on va un peu plus dans les détails pour certaines parties…
Séparez le contenu du contenant
Ca veut dire qu’un module est composé :
- d’une brique pour la gestion de la bordure (coin arrondis ou carrés, couleur, ombre)
- d’une brique pour le fond (fond uni, image de fond en filigrane, dégradé)
- d’un ensemble de briques pour le contenu
Autrement dit, un module devrait avoir 3 classes afin de définir à quoi doit ressembler sa bordure, quel est le fond à appliquer et comment le contenu doit être organisé.
Séparez la structure et le design
Prévoyez à l’avance la structure basique d’un bloc : faut-il un header dans un bloc ? faut-il un footer ?
De cette manière, créer un bloc se limitera à appliquer les bonnes classes (”block”, “hd”, “ft”, “bd”) au contenu du block.
Une fois que cette structure est définie, vous pouvez alors concevoir les différents design qui s’appliqueront sur cette structure : une brique avec des coins arrondis, une brique pour gérer le fond en dégradé, etc.
Faites des modules transparents
Si vous voulez des coins arrondis, préférez une solution où le coin est créé par l’extérieur et non par l’intérieur, autrement dit une solution où l’image du coin est transparente à l’intérieur et unie à l’extérieur. Cette solution vous permettra d’appliquer n’importe quel fond à l’intérieur de votre bloc, que ce soit une couleur unie ou une image en arrière-plan.
Bémol : le bloc ne pourra être placé que sur un fond correspond à la couleur extérieure de vos coins arrondis (typiquement le fond de votre page).
Soyez flexible
Faites de la gym. Faites en sorte que vos briques puissent s’adapter en largeur et en hauteur. En hauteur pour pouvoir s’adapter à la hauteur du contenu, en largeur pour pouvoir réutiliser votre brique dans n’importe quelle zone de votre grille même si la largeur varie.
C’est la grille qui doit gérer la largeur, les blocs doivent ignorer pour quelle partie de la grille ils ont été conçus.
Tentez une approche UML
Tentez de mettre en place un système d’héritage à vos briques. Certaines briques seront compatibles ensemble (par exemple certaines briques de gestion de bordure ne pourront pas forcément être appliquées à n’importe quel brique d’arrière plan ou même de mise en forme du contenu).
Ces relations entre vos briques peuvent donner lieu à un schéma plus ou moins UML pour faciliter la compréhension des briques existantes.
Un exemple d’approche UML conçue par Nicole :
Approche UML pour la couche CSS d'un projet
Bref, plein de bonnes suggestions à tenter de mettre en pratique…
