Future Friendly CSS

- https://github.com/darcyclarke/dss
- https://github.com/darcyclarke/grunt-dss
- https://github.com/kneath/kss
- http://kaleistyleguide.com/
- http://jacobrask.github.io/styledocco/
- http://24ways.org/2011/front-end-style-guides/
- https://github.com/necolas/idiomatic-css
- https://github.com/ginatrapani/ThinkUp/wiki/Code-Style-Guide:-CSS
- https://github.com/styleguide/css
- https://github.com/MoOx/moox.github.io/blob/e46b400583db22674ca6e658a54597f2ce821fd2/src/blog/_drafts/CSS-refactorisation.html.hbs

Transcript

1. FUTURE FRIENDLY
   CSS
   Pour que vos CSS aient la classe.
   1
   

   View Slide

2. FRONT-END
   2
   

   View Slide

3. FRONT-END SOURCE
   3
   

   View Slide

4. CSS OUTPUT
   4
   

   View Slide

5. LA FEUILLE DE STYLE
   5 . 1
   

   View Slide

6. VOUS AVEZ
   Une feuille ?
   Des selecteurs à rallonges ?
   Des propriétés à surcharger trop souvent ?
   De la soupe de propriétés ?
   5 . 2
   

   View Slide

7. Et donc ?
   6
   

   View Slide

8. IL FAUT
   Un structure
   Du réutilisable
   Des règles
   De la clarté
   7
   

   View Slide

9. CE NE SONT PAS DES SOLUTIONS
   Framework CSS
   Pré-processeurs
   8
   

   View Slide

10. MAIS AU FAIT LE PROBLEME
    C'EST QUOI ?
    9
    

    View Slide

11. ...LE PROBLÈME...
    C'TOI
    10
    

    View Slide

12. RAPPEL
    Il faut souffrir pour être beau.
    11
    

    View Slide

13. DU CONCRET ?
    1. Nommez
    2. Organisez
    3. Découpez
    4. DOCUMENTEZ
    12
    

    View Slide

14. ET AUSSI
    BOSSER DUR
    et surtout
    surtout
    RE-FA-CTO-RI-SEZ
    13
    

    View Slide

15. 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.
    14 . 1
    

    View Slide

16. # IDS
    ids.goto(trash)
    Les ID c'est bon pour les penseurs.
    Ou les liens en fait.
    14 . 2
    

    View Slide

17. #CLASS/SELECTOR TO AVOID
    .title {}
    .content {}
    .content {}
    .widget h3 {}
    14 . 3
    

    View Slide

18. # THE WAY TO GO
    .widget {}
    .widget__title {}
    .widget__title­­smaller {}
    .widget__body {}
    .widget__body­­large {}
    14 . 4
    

    View Slide

19. 2 # ORGANISER
    /styleguide
    15 . 1
    

    View Slide

20. /PAGES
    /UTILITIES
    ...
    15 . 2
    

    View Slide

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

    View Slide

22. 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
    16
    

    View Slide

23. 4 # DOCUMENTEZ
    Et oui.
    17 . 1
    

    View Slide

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

    View Slide

25. # STYLEGUIDES IDEAS
    https://github.com/necolas/idiomatic-css
    https://github.com/ginatrapani/ThinkUp/wiki/Code-
    Style-Guide:-CSS
    https://github.com/styleguide/css
    17 . 3
    

    View Slide

26. BONUS
    Bientôt dans un post
    Truc et astuces pour refactoriser une CSS bien moche
    18
    

    View Slide

27. NETTOYER VOS CSS !
    BY @MOOX ON & /
    MAXIME THIROUIN /
    TWITTER GITHUB
    MOOX.IO
    19
    

    View Slide