Appliquer les règles apportées par les FrameWorks CSS
Nous parlons beaucoup des FrameWorks CSS, ceux-ci peuvent apporter une certaine constance du code pour les interfaces développées, ainsi qu'améliorer la rapidité de développement ; pourtant il peuvent être aussi source de lourdeurs pour certains projets un peu particulier. Que faut-il retenir dans la philosophie des différents FrameWorks ?
Reprenons un article d'Alex Dawson qui liste les différentes méthodes des FrameWorks CSS pour en analyser les avantages : The Right Frame of Mind: Applying the Lessons of CSS Frameworks.
Un FrameWork, qu'est-ce c'est ?
Un FrameWork CSS est avant tout un système de convention par rapport à la manière de développer une interface. Le code traite de sujets comme le colonnage, la typographie ou encore la navigation. Quels sont les aspects traités par un FrameWork :
- Les comportements navigateurs - bugs IE
- Les composants habituels - formulaires, erreurs…
- Les propriétés récurentes - styles souvent utilisés
Les méthodes
Le reset
Le chargement d'une css de reset (reset.css) permet d'initialiser les styles par défaut des navigateurs. Chaque navigateur ne propose pas les mêmes styles pour l'affichage des listes à puces ou des polices.
La grande majorité des FrameWorks passent par le reset.css. A vous de définir votre propre reset.css ou de reprendre la feuille d'Eric Meyer.
A noter que vous pouvez passer, non pas par un reset.css, mais par un base.css ; solution qui au lieu d'intialiser les styles par défaut puis les redéfinir, les définit en réécrasant les styles initaux directement (a piori gain de poids de CSS)
Les styles de la baseline
Les FrameWorks apportent une configuration pour l'affichage des balises courantes (type : title, del, ins, abbr…). Cette configuration, reprise de zéro, est très fastidieuse et se révèle (à part quelques couleurs) similaire sur tous les projets.
Une fois que vous avez défini un comportement, pour ces balises particulières, qui convient à votre style de développement, regroupez les dans un fichier pour reprendre les styles à chaque projet.
Les styles appliqués sur des id
De ce côté, les FrameWorks CSS sont peu fournis, puisque les styles appliqués par id sont difficilement similaire d'un projet à l'autre. A savoir qu'une id ne peut se déclarer qu'une seule fois dans une page HTML, les styles ne peuvent donc s'appliquer qu'à des éléments uniques de la page.
L'objectif pour définir des styles pouvant être repris dans divers projets est de déterminer la similitude de propriétés entre ces projets; Pour cela, on va se pencher sur des zones comme l'entête, le pied de page, ou les menus de navigation.
Les styles appliqués sur des class
Les styles sur des class sont appliqués par tous les FrameWork CSS ; ce qui semble normal, sinon on se demanderait à quoi ils peuvent bien servir. Grâce à des styles prédéfinis et correctement dissociés, pour appliquer un style à un élément, il suffit de lui donner la class correspondante contenue dans votre feuille de style CSS.
On rappelle que plusieurs class peuvent être associées à un élément.
L'idée à bien retenir est d'avoir des class que vous pouvez réutiliser dans l'ensemble de vos projets. A savoir que la définition de ces classes est aussi variée que le nombre de FrameWork existant ; elle correspond à une logique. Chacun peut avoir la sienne. C'est quand on a bien assimilé ce principe que le grand débat sur la sémantisation des class fait son apparition.
La phase de réutilisation du code
Voici les points à considérer pour une bonne réutilisation de son code CSS
- Utiliser une convention de nommage
- Estimer la probabilité de réutilisation d'une class
- Correction des bugs de navigateur
- Structuration du code dans les feuilles de styles
- Suppression des redondances
- Commenter et documenter le code
Conclusion
Cet article montre les grands principes de construction d'un FrameWork CSS. Le principe majeur est que beaucoup de code peut être réutilisé d'un projet à l'autre. Une fois les propriétés définies, il est important de respecter des règles de nommage et d'organisation afin d'accélérer la déclinaison d'un site mais aussi pour en faciliter la maintenance.