Les bonnes pratiques en CSS

CSS (Cascading Style Sheets), ou l'art de mettre en forme vos pages web. Facile à retenir mais bien plus compliqué à maintenir. Combien de fois ai-je du repasser derrière des intégrateurs passés maîtres dans l’art des mauvaises pratiques. Deux fois et en réalité ça ne m'empêche pas de dormir la nuit ! Mais voilà, d'après ce que j'ai pu apprendre il est impératif de partir avec de bonnes bases le plus tôt possible et elles sont nombreuses. Voyez cet article comme un memento, un rappel ou encore un recueil de bonnes pratiques qui vous aideront à vous améliorer.

les bonnes pratique en css

Cette publication s'adresse à des personnes qui connaissent un minimum le CSS. Elle dresse une liste non exhaustive de ces fameuses bonnes pratiques et tend à offrir des explications simplifiées. Pour finir elle n'est pas fermée et ne renferme pas la vérité absolue, ce qui veut dire qu’elle peut à tout moment être corrigée. Accrochez-vous !

La base

Pour commencer je vous invite à lire le guide CSS, de Harry Roberts et traduit par David Leuliette.

18 points pertinents pour repartir du bon pied ! On y trouve beaucoup de bon sens mais quelques aspects ont tendance à être littéralement oubliés par les intégrateurs.

Si vous devez n’en lire que certains points parmi les 18 je vous conseille en priorité :

Tous les points sont importants. J'ai cité ceux qui me semblent les plus essentiels.

Il faut compter 30min à une heure de lecture pour les plus lents, c’est un excellent guide qui commencera à vous remettre dans le droit chemin.

Conventions de nommage

Le Guide CSS en parle dans les points 4 et 7. A partir de là vous avez deux choix, soit vous utilisez votre propre convention ou bien vous employez une convention établie par des personnes avec plus d'expérience que vous. Il ne s'agit pas de règles fermées mais plutôt d'approches réalisées par des professionnels. Les conventions de nommages constituent l’un des piliers de la stabilité de tout projet informatique. Par exemple si tous les développeurs d'une même équipe utilisent les mêmes conventions ils risqueront moins d'entrer en contradiction et ils obtiendront ainsi un gain de temps non négligeable. Performance, maintenabilité, temps de travail, compréhension …

Un bon projet est un projet normalisé.

OOCSS : Object-Oriented CSS

OOCSS a pour principe de factoriser les propriétés visuelles en créant des classes flexibles, combinables et réutilisables. Qui dit réutilisable dit proscription des sélecteurs par id et par tag (div, h1, h2 ...)

Les principaux avantages de cette approche sont une maintenance plus aisée et une réutilisation de l'existant. Pour les utilisateurs de Bootstrap (et je sais qu'ils sont nombreux) : la bibliothèque utilise fréquemment la méthode OOCSS, ce qui prouve son utilisation dans de nombreux projets web.

Exemple des bouttons de Bootstrap :

//Création d'une class de bouton
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
//Création d'un class pour surchagrer la couleur du bouton par defaut
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
//Création d'un class pour surchagrer la couleur du bouton
.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

Rendu :

J'ai pu constater que plus vous avez de l'expérience en CSS, plus vous tendrez naturellement à vous orienter vers la méthode OOCSS.

BEM: Block, Element, Modifier

BEM a pour principe d'organiser vos styles par blocs indépendants. Il utilise le développement orienté composant, on retrouve donc cet aspect de code réutilisable. Chaque bloc est unique (tout en évitant le sélecteur « id »). Les cascades de sélecteurs sont à proscrire.

Ce qui semble être une méthode à l’opposé de l'OOCSS peut être très bénéfique sur de nombreux aspects. Hier, il fallait qu'un système soit complet et qu'il remplisse un grand nombre de tâches. Aujourd'hui, nous nous apercevons que ces systèmes sont de vraies usines à gaz (c'est une grossière simplification de la réalité qui est bien plus complexe). La tendance actuelle est de créer de petites applications indépendantes qui peuvent s’imbriquer pour former un tout, à la manière des LEGOs. La BEM offre une solution forte dans ce sens.

SMACSS : Scalable and Modular Architecture for CSS

Établi par Jonathan Snook, SMACSS(en) a pour objectifs et de diminuer les dépendances, renforcer la performance des sélecteurs, et apporter la possibilité d'utiliser les préprocesseurs (voir plus loin dans l'article).

Traduit par Jonathan Path et Estelle Bonhomme, SMACSS(fr) est un excellent livre consacré aux bonnes pratiques du CSS.

Reset your CSS

Normalize

Normalize créé par Nicolas Gallagher est un fichier CSS personnalisable, il rend les éléments de votre DOM plus cohérent et en conformité avec les normes modernes. Le projet tire son origine de recherches sur les différences entre les styles par défaut des navigateurs afin de cibler plus précisément les styles qui ont besoin de normalisation.

Pour faire simple, il supprime les styles appliqués par défaut par les navigateurs. À utiliser sans ménagement. Il doit être le tout premier style à être appelé.

Reset

Écrit par Eric Meyer, Reset fait partie avec normalize des deux grandes bibliothèques de remise à zéro des styles. Vous risquez de les croiser souvent.

Attention aux mauvaises pratiques ; si vous devez utiliser des annulations de styles sur vos sélecteurs en dehors d'un reset, c'est que vos styles ne sont pas correctement gérés.

h1,h2,h3,h4,h5,h6{
	padding : 20px
	float : left;
}

//Une annulation de style n'est jamais bonne !
h1.mini{
	padding:0;
	float:none;
}

Système de Grille

Si vous êtes dans l'industrie du web et plus généralement dans le monde de l'informatique vous n'êtes pas sans savoir que les applications multi plateformes (TV, ordinateur, tablette, smartphone …) sont la grande tendance du moment. Auparavant il fallait une application différente pour chaque environnement, mais aujourd'hui il est plus conseillé de développer sur une seule plateforme puis de compiler le code source pour les autres environnements. Un seul, code, plusieurs supports.

Dans le monde du web cette pratique existe et on la nomme responsive design. Le but est de réaliser un seul code CSS qui adaptera la taille et l’ordonnancement des composants de vos pages en fonction de la résolution des terminaux.

Ici, deux solutions s’offrent à vous :

  • vous créez votre propre style en responsive design
  • vous utilisez un framework déjà approuvé par une communauté et créé par des personnes expérimentées.

Ça vous rappelle quelque chose 

Bootstrap

Créé par les ingénieurs de Twitter, il reste aujourd'hui l'un des frameworks CSS et JavaScript les plus utilisés au monde. La quatrième version arrivera bientôt, mais sachez que la seconde était déjà très bien construite et que la troisième a su confirmer l'excellence de la technologie. Une documentation (en anglais) extrêmement bien construite permet en un coup d’œil de saisir les prestations offertes. Très complet, je le recommande vivement. Basé sur un système de grille à 12 colonnes, Bootstrap permet une découpe de votre site en fonction de la résolution des écrans.

Malheureusement, si 15 sites utilisent uniquement Bootstrap ils auront tous à peu de choses près le même habillage graphique.

Un conseil que je peux vous donner et de n'utiliser qu'un nombre limité de ses fonctionnalités. Justement, ça tombe bien parce que Bootstrap vous permet de choisir les composants que vous souhaitez utiliser.

Pour ma part je n'utilise que la grille de Bootstrap, à savoir :

  • Grid system
  • Responsive utilities
  • éventuellement la gestion des tableaux.

Rendez-vous sur la page customize et utilisez ce fichier config.jon :

Download JSON Bootstrap Grid

Généralement je réalise un nettoyage de ma grille car certaines parties sont rarement utilisées comme les tailles 1, 5, 7, 11. Si vous ne prévoyez pas de les utiliser, alors retirez-les lors de votre passage en production, vous gagnerez ainsi un tiers de place disponible.

960 Grid

Voici une bonne alternative à Bootstrap. Le système de grille 960 fournit un espace de travail à la dimension couramment utilisée, avec une largeur de 960 pixels. Il existe deux variantes: 12 et 16 colonnes, qui peuvent être utilisés de façon séparée ou bien en tandem. La grille fixe permettra de créer des maquettes beaucoup plus réalistes (12 colonnes = 60px par colonne, 16 colonnes = 40px par colonne).

De grands sites utilisent 960 Grid, pour ne citer qu’eux :

  • Fedora : la distribution Linux gratuite de RedHat, fer de lance de la communauté linux, l'une des plus grandes entreprises professionnelles linux.
  • Drupal : le 3éme CMS le plus utilisé au monde

BluePrint

Moins connu que les deux précédents, BluePrint offre également une bonne grille CSS pour rapidement mettre en page vos éléments.

Attention au Reset

La plupart des frameworks de grille utilisent un « reset » ou un « normalize » au début des fichiers de leurs styles. Personnellement, je préfère séparer les deux outils pour qu’ils gardent chacun leurs indépendances. Dans le cas où vous gardez le « reset » des systèmes de grille, veillez à ne pas en utiliser un avant sous peine d'être redondant.

Mobile first ou Desktop first

Le mobile first est l'art de mettre en forme sa page en version mobile puis de l’adapter au fur et à mesure jusqu’à arriver à un affichage dédié aux écrans les plus larges.

Le desktop first consiste à faire le processus inverse, on part des écrans larges pour aller vers l'affichage sur mobile.

Selon la méthode que vous utilisez (avec ou sans framework de grille), vous devez vous en tenir à une seule pratique. Dans le cas où vous utilisez un framework vous devez suivre sa logique. Bootstrap est en mobile first donc si vous ajoutez un complément de code responsive design alors il doit également être en mobile first.

Les nombres magiques et quelques astuces

Le guide CSS en parle au point 15 ; pour ma part je place dans le même panier les nombres magiques et les astuces d'affichages. Souvent utilisées à tort et à travers parce que « ça fonctionne », ces pratiques sont généralement synonymes d'une erreur de conception.

!important

Il est surexploité, souvent par manque d'expérience. Son utilisation surclasse vos styles. Il est l'archétype du problème de conception. Son utilisation devrait être extrêmement rare. À oublier d'urgence !

text-indent:-9999px;

Une méthode utilisée pour masquer le texte d'un élément. Cette technique place le texte en dehors de la zone de lecture de l'utilisateur et passe pour « non existant ». Si vous utilisez une balise qui nécessite de cacher son texte c'est que vous avez choisi une mauvaise balise.

Mais dans certains cas où vous ne pouvez pas faire autrement (module de CMS qui a fait le mauvais choix de sa balise ; je ne veux dénoncer personne mais j'ai pas mal de noms en tête)

Une technique plus propre a été découverte par Scott Kellum et consiste à faire flotter le texte en dehors de la page, peu importe sa taille.

Attribuez ces trois attributs pour obtenir l'effet :

.no-text{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

L'utilisation d'une valeur aussi grande pour « text-indent » demande bien plus de ressources mémoire que la méthode ci-dessus.

z-index

Il permet de mettre au même plan plusieurs éléments, un peu comme le système de calque dans les logiciels de PAO ou plus généralement les logiciels de dessin. Très souvent utilisé comme astuce il a tendance à polluer le style plutôt que de l'améliorer. Si vous placez correctement vos éléments dans l'arbre DOM, vous ne devriez pas l'utiliser.

@import

Très utile pour appeler les feuilles de styles, @import est ignoré par les vieux navigateurs. Donc votre responsive design ne passera pas sur les vieux navigateurs avec un appel de style @import.

<link rel="stylesheet" href="styles.css">
<style type="text/css">@import url('styles.css');</style>

Mélanger les méthodes d’appel au CSS va bloquer le téléchargement parallèle de vos styles ce qui provoque une baisse des performances. Limitez-vous de préférence à la balise <link>.

Ce n’est pas moi qui le dit mais Steve Souders, qui travaille chez Google sur la performance des sites web. Voir cet article

Valeurs brutes et absolues

Dans un projet web les valeurs absolues peuvent être une calamité. Surtout dans la grande vague qu'est le responsive design. Les valeurs absolues ou brutes sont à l'inverse d'un système adaptatif (responsive). Les valeurs relatives permettent justement l'adaptation aux autres attributs.

Exemple de valeures relative pour des bordures :

.petite-taille{
	font-size: 16px;
}
.grande-taille{
	font-size: 30px;
}
.bordures-adaptatives{
    border: 0.1em solid black;
}

Resultat :

Élement de petite taille avec bordure adaptatives

Élement de grande taille avec bordure adaptatives

La valeur relative "0.1em" de la bordure grossi en fonction de la taille de l'élément

Donner une valeur juste parce que ça fonctionne et que l'affichage suffit est l'une des pires erreurs que l'on puisse faire.Il faut plutôt penser à ceux qui passeront derrière vous, dans le cas d'une valeur absolue ou brute laissez des commentaires si vous pensez qu'il y à un risque d'incompréhention

Préprocesseurs CSS

Un préprocesseur est un outil qui ajoute de nombreuses fonctionnalités pour l'écriture des feuilles de style. Parmi les fonctions les plus appréciés il y a :

  • la conception orientée objet,
  • l’ajout de variables,
  • l’ajout de fonctions
  • l’automatisation des préfixes...

Il compilera ensuite votre code pour finalement produire un fichier CSS.

Une bonne pratique ? Je ne sais pas. Mais ce qu'il y a de sûr, c'est que vous gagnerez un temps énorme sur votre projet ainsi qu’une meilleure compréhension de vos styles. De plus en plus utilisées par les agences web, je vous conseille de vous rapprocher de ces technologies. Les préprocesseurs feront partie d'un futur article.

Parmi les plus connus :

Valider son CSS

Il faut vérifier que vos attributs CSS sont compatibles avec le public visé. Dans une très grande majorité des entreprises, on trouve encore des machines qui évoluent sous Windows XP avec Internet Explorer (6,7 et 8) et même Firefox 3 et 3.6. Quelle en est la raison ? Il faut dire que beaucoup d'applications métier ne sont compatibles qu’avec ces vieilles versions de navigateurs. Les mises à jour coûtent généralement cher donc les développeurs font reculer l’échéance afin de réduire les coûts engendrés. Il convient donc de faire attention avec le choix des attributs. À l'inverse, si 99% de vos utilisateurs emploient les dernières versions de Firefox et Chrome, vous pouvez vous concentrer dans un premier temps sur ces navigateurs puis peaufiner par la suite pour les 1% restant.

W3Schools

Voici LE « site » de référence, la bible du web. Si vous devez n’utiliser qu'une seule ressource alors ça doit être elle.

Can I use

Probablement le service le plus connu pour tester vos attributs CSS. Il saura rendre compte de la comptabilité de vos attributs sur les différents navigateurs au travers d’une interface simple et efficace.

Essayez au maximum d’utiliser des attributs compatibles avec le plus de navigateurs possible. En plus de cette première précaution, il est recommandé de prévoir un style alternatif moins tape-à-l’œil mais qui ne provoque pas d'erreurs d'affichage. (là je pense à la propriété « transitions » qui permet d’obtenir des animations en CSS3 mais qui ne passe que sur les versions supérieures à Chrome 26, Edge 12, IE 10, Firefox 16, Safari 6.1 et Opera 12.1 sans les préfixes).

Préfixes CSS

Pour rappel, les préfixes permettent de forcer le passage d’un attribut sur les vieilles versions des navigateurs (à voir au cas par cas Navigateur/Version). Chaque préfixe correspond au moteur de rendu utilisé par les navigateurs.

  • -o- pour Presto (Opera). Maintenant ils utilisent le moteur Blink.
  • -moz- pour Gecko (Mozilla)
  • -webkit- pour Webkit (Chrome, Safari, Android...)
  • -ms- pour Microsoft (Internet Explorer)
  • -khtml- pour KHTML (Konqueror)

Par convention, les versions préfixées sont à ajouter avant la version originale. Les préfixes ajoutés seront ignorés par les navigateurs non concernés. Nous sommes alors en droit de nous poser la question suivante : « le temps d’exécution de la feuille de style peut-il être impacté par les préfixes ? ». Dîtes vous qu'il est préférable d'avoir une application multi plate-forme qu'une application supportée uniquement par un seul navigateur. Malheureusement, une feuille de style qui contient des préfixes ne sera pas valide vis-à-vis du W3C.

Je vais m’arrêter sur un dernier point : la tendance veut que chaque navigateur souhaite imposer ses propres préfixes pour se démarquer des autres donc même si les développeurs rêvent d'un monde parfait ou une seule et unique syntaxe suffirait à faire de l'intégration, sa reste un rêve.

Style conditionnel

Il faut préférer un style conditionnel plutôt que de choisir un hack CSS (peu fiable d'après Microsoft) pour les vieux navigateurs ! Pour ceux qui ont oublié ce qu’est le style conditionnel, en voici un exemple :

<!--[if lt IE 6]>
    <link rel="stylesheet" href="styles-conditionnels.css" media="screen">
<![endif]-->

Fonctionne aussi :

  • <!--[if lt IE 7]>
  • <!--[if lt IE 8]>
  • <!--[if lt IE 9]>
  • plus valide pour la version 10

Valeurs possibles:

  • ! = non (par exemple <!--[if !IE 5.0]>)
  • lte = inférieur ou égal à
  • lt = inférieur à
  • IE = version concernée
  • gte = supérieur ou égal à
  • gt = supérieur à

CSS en Production

La dernière étape enfin, probablement la plus respectée des bonnes pratiques, est la compression de vos styles CSS.

Il s’agit de retirer tous les espaces, tabulations et retours chariots afin de faire gagner de précieux octets/kilo-octets et donc du temps de chargement. La majeure partie des CMS et autres outils de gestion de contenu proposent un outil interne pour compresser les styles CSS. Même en ce qui concerne les sites réalisés « à la main » je vous conseille d’utiliser un outil de ce genre. En voici deux exemples

CSS Minifier / CSS Compressor

Voilà deux excellents outils de compression (CSS Minifier / CSS Compressor). Ils proposent des niveaux de compressions et factorisent les éléments redondants. (attention il ne s’agira plus de votre style original). En cas de compression de haut niveau je vous conseille de garder une copie de votre feuille de style originale pour pouvoir la retravailler plus tard.

Conclusion

Acquérir de bonnes pratiques n'est pas une chose aisée, quel que soit le domaine visé. Les conserver s’avère bien plus compliqué en sachant que dans le monde de l'informatique, chaque jour apporte son lot de nouveaux outils et de nouvelles pratiques. Mettez-vous à jour de façon régulière. Comme je l’ai dit un peu plus haut, cet article n'est pas arrêté, il sera mis à jour régulièrement pour faire état des choses qui ont le profil de la bonne pratique en CSS. Comme je suis de bonne humeur, voici un petit résumé des choses importantes mentionnées précédemment :

  • utilisez des conventions d'écriture,
  • réduisez vos spécificités (= nav ul.menu3 li ul.sous-menu3 li a.sndLien)
  • privilégiez les applications multi plateformes,
  • allégez votre code,
  • commentez les passages complexes (pensez aux copains développeurs),
  • dites-vous que les ID, c'est pour le JavaScript et les ancres donc réduisez-en l’utilisation,
  • arrêtez d’écrire des nombres magiques,
  • utilisez des frameworks,
  • restez logiques dans votre démarche.

Mon conseil n'est pas de tout connaître par cœur. N'hésitez pas à comparer les différentes solutions mais apprenez 2, 3 frameworks ou méthodes différentes, chacun dans un domaine pour ne pas faire doublon (une pour les conventions, un pour la grille, un préprocesseur CSS ...). Vous gagnerez beaucoup de temps, d’énergie, de maintenabilité, de flexibilité […] sur le long terme.

Voilà, c'est la fin ! Il est difficile de ne parler que des bonnes pratiques en CSS, on a tendance à vouloir s’écarter du chemin pour proposer une multitude d’outils et de ressources. J'espère ne pas m’être écarté de ma ligne directrice et de ne pas avoir oublié d'éléments « !important » pour ce premier article.

Merci de votre lecture. N'hésitez pas à partager l'article !

Il manque des informations ? Vous avez trouvé des fautes ? N'hésitez pas à faire un retour de votre lecture