future friendly css

Pour que vos CSS aient la classe.

Slides Source

Front-end

Front-End Source

CSS output

La feuille de STyLE

VOus AVEZ

  • Une feuille ?
  • Des selecteurs à rallonges ?
  • Des propriétés à surcharger trop souvent ?
  • De la soupe de propriétés ?
Et donc ?

Il faut

  • Un structure
  • Du réutilisable
  • Des règles
  • De la clarté

Ce ne sont pas des solutions

  • Framework CSS
  • Pré-processeurs

Mais Au FAIT LE PROBLEME C'est QUOI ?

...le problème...






C'TOI

RAPPEL

Il faut souffrir pour être beau.

Du concret ?

  1. Nommez
  2. Organisez
  3. Découpez
  4. DOCUMENTEZ

Et aussi


BOSSER DUR


et surtout
surtout



RE-FA-CTO-RI-SEZ


...bordel.

1 # NOMMER

Une grosse partie du boulot de développeur est de trouver de bon nom.

Qui parle.

  1. Il vaut mieux trop que pas assez.
  2. Le nom ne doit pas dépendre du style.

# IDS

ids.goto(trash)

Les ID c'est bon pour les penseurs.

Ou les liens en fait.

#CLASS/SELECTOR TO AVOID


.title {}
.content {}
.content {}
.widget h3 {}

# THE WAY TO GO


.widget {}
.widget__title {}
.widget__title--smaller {}
.widget__body {}
.widget__body--large {}

2 # Organiser

/styleguide
  • styleguide/_colors.scss
  • styleguide/_fonts.scss
  • styleguide/_typography.scss
  • styleguide/_buttons.scss
  • styleguide/_forms.scss
  • styleguide/_icons.scss
  • styleguide/_grid.scss
  • styleguide/_navigation.scss
  • styleguide/_listing.scss
  • styleguide/_labels.scss
  • styleguide/_boxes.scss
  • styleguide/_pagination.scss

/pages

/UTILITIES

...

REUTILISEZ

Il faut "juste" une bonne librarie (de mixins éventuellement)
Compass (le gros et ses plugins)
ou
Fonzie (les petits)
+ La votre...

3 # DECOUPER

On ne doit pas deviner la structure HTML dans vos CSS.
Parce qu'on s'en balance. 
CSS ne doit pas dépendre d'une structure HTML

4 # DOCUMENTEZ

Et oui.

Documenter ses CSS ?

DSS et sa tâche Grunt :)
ou
KSS
kaleistyleguide
styledocco
http://24ways.org/2011/front-end-style-guides/

# STYLEGUIDES IDEAS

https://github.com/necolas/idiomatic-css
https://github.com/ginatrapani/ThinkUp/wiki/Code-Style-Guide:-CSS
https://github.com/styleguide/css

Bonus

Truc et astuces pour refactoriser une CSS bien moche Bientôt dans un post

Nettoyer vos CSS !

By @MoOx on Twitter & Github/ Maxime Thirouin / moox.io