CSS - bonnes pratiques
Bonnes pratiques - écrire du bon CSS
Quelques articles:
- Principes à connaître pour améliorer vos feuilles de styles, par Hugo Giraudel, 2012
- Pour des sélecteurs CSS raccourcis, par Harry Roberts, 2012
Comment organiser ses feuilles de style? Un exemple: la méthode Daisy, proposée par Romy Duhem-Verdière.
Deux expertes qui ont donné d’excellentes conférences sur les bonnes pratiques en CSS:
- Nicole Sullivan.
- Nathalie Downe, l’une des premières à parler de systèmes de design : voir les slides de ses présentations CSS Systems (2008) et Practical, maintainable CSS (2009).
Outils et méthodes
Des principes pour nommer les classes CSS, et structurer les feuilles de styles. Voici des méthodes parmi les plus connues:
- la méthode BEM: “Block, Element, Modifier” - https://en.bem.info/methodology/
- ITCSS - “Inverted Triangle CSS”, par Harry Roberts de CSSwizardry.com
- SMACSS - “Scalable and Modular Architecture for CSS”, par Jonathan Snook
Frameworks CSS
Quelques frameworks CSS en utilisation:
- ZURB Foundation - lancé en 2011 par ZURB, une agence de design californienne.
- Bootstrap - lancé en 2011 par Mark Otto et Jacob Thornton, développeurs chez Twitter.
- KNACSS, par Raphaël Goetter et Alsacréations.
- Röcssti, un micro-framework CSS, par Nicolas Hoffmann.
- Tiny Typo, “une base CSS pour le contenu éditorial web”, par Romy Têtue.
- InuitCSS, par Harry Roberts.
Anciens frameworks (aperçu historique):
- Yahoo User Interface Library (YUI) - lancé en 2006, abandonné en 2014.
- Blueprint - lancé en 2007, comme alternative à la Yahoo UI Library, abandonné en 2011.
- 960 grid system, lancé en 2008 par Nathan Smith (le chiffre 960 fait référence à la largeur d’écran de 960px couramment utilisée vers 2008).
- pure.css - par Yahoo, lancé en 2013, abandonné en 2015.
Une liste de frameworks CSS sur Wikipédia.
L’utilisation d’un Framework n’est pas forcément une bonne pratique: lire l’article de Belén Albeza, You might not need a CSS framework.
En 2012, Jacob Thornton, co-auteur de Bootstrap, écrivait:
For me, Bootstrap is very fun, not serious – nearly every line is a joke. It’s trying to provoke you. Taking shortcuts. Demanding that you reread it. Reread it again. It’s very pop. Very optimistic. Forward. Playful.
En 2017, avec l’arrivée du module CSS Grids dans les navigateurs, il n’est plus très pertinent d’utiliser une grille préconçue par un framework - il est tout aussi facile de la créer directement en CSS.
Afin d’illustrer cela, Jen Simmons a créé un framework parodique, 960 Grid Grid Grid : “a silly project from someone who is starting to hate 12-column symmetrical grid frameworks”
Préprocesseurs (Less, Sass…)
Autoprefixer:
https://github.com/postcss/autoprefixer
SMACSS - “Scalable and Modular Architecture for CSS”, par Jonathan Snook, est une méthodologie pour la construction des feuilles de style.
http://cssguidelin.es/ - High-level advice and guidelines for writing sane, manageable, scalable CSS - par Harry Roberts.
Enduring CSS - A guide to writing style sheets for large scale, rapidly changing, long-lived web projects - par Ben Frain.