Bonnes pratiques - écrire du bon CSS

Quelques articles:

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. Par exemple, la méthode BEM: “Block, Element, Modifier” - https://en.bem.info/methodology/

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.

http://tympanus.net/codrops/2013/07/17/troubleshooting-css/

Aller plus loin - ressources

Des blogs traitant de CSS:

En français:

  • Gobanclub.net
  • letrainde13h37.fr
  • OpenWeb - site du collectif OpenWebGroup
  • La Cascade - un blog consacré à la traduction en français de textes du web anglophone sur HTML, CSS, JavaScript, mais aussi sur le design, les métadonnées, les outils de construction.
  • Pompage - créé en 2001 par Stephanie Booth pour répondre à un besoin évident parmi la communauté francophone du web design, en proposant des traductions d’articles.

En anglais:

  • bitsofcode, le blog de Ire Aderinokun, UI Designer et Front-End Developer.
  • The New Code, le blog de Dudley Storey, auteur du livre Pro CSS Animation.