Maîtriser son style CSS

Ce projet vise à démontrer comment maîtriser et mieux organiser son style CSS. Les différentes sections visent à mettre en évidence les différentes manières de faire et les patterns exposés durant la conférence.

Pour le code source, c'est par ici : https://github.com/prenaudin/styleguide_css

Étapes

• Pourquoi et comment on en arrive à vouloir organiser son CSS
• Quelles sont les conventions à connaître
• Itérations sur un exemple :
  • Application des conventions
  • Refactoring
  • Utilisation d'un framework CSS
  • Utilisation d'un préprocesseur
  • Déclarations de variables et mixins

Outils utilisés

Pour gérer le style guide ici présenté :

• Hologram : Gem pour générer des guides de styles https://github.com/trulia/hologram
• Cortona : styles et améliorations apportés à Hologram https://github.com/Yago/Cortana
• Pygment : meilleur affichage des exemples de codes https://github.com/richleland/pygments-css

Les préprocesseurs en CSS :

• SASS http://sass-lang.com/
• LESS http://lesscss.org/
• Rework.css https://github.com/reworkcss/rework

Les frameworks CSS :

• Foundation http://foundation.zurb.com/
• Bootstrap http://getbootstrap.com/
• Picnic.css http://picnicss.com/

Les conventions de code front et outils d'analyse de code CSS

• Codeguide : http://codeguide.co/
• CSSStats : http://cssstats.com/

Références

• Fat @medium : https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06
• Mdo CSS @github : http://markdotto.com/2014/07/23/githubs-css/