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
2. FRONT-END 2
3. FRONT-END SOURCE 3
4. CSS OUTPUT 4
5. LA FEUILLE DE STYLE 5 . 1
6. VOUS AVEZ Une feuille ? Des selecteurs à rallonges ? Des propriétés à surcharger trop souvent ? De la soupe de propriétés ? 5 . 2
7. Et donc ? 6
8. IL FAUT Un structure Du réutilisable Des règles De la clarté 7
9. CE NE SONT PAS DES SOLUTIONS Framework CSS Pré-processeurs 8
10. MAIS AU FAIT LE PROBLEME C'EST QUOI ? 9
11. ...LE PROBLÈME... C'TOI 10
12. RAPPEL Il faut souffrir pour être beau. 11
13. DU CONCRET ? 1. Nommez 2. Organisez 3. Découpez 4. DOCUMENTEZ 12
14. ET AUSSI BOSSER DUR et surtout surtout RE-FA-CTO-RI-SEZ 13
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
16. # IDS ids.goto(trash) Les ID c'est bon pour les penseurs. Ou les liens en fait. 14 . 2
17. #CLASS/SELECTOR TO AVOID .title {} .content {} .content {} .widget h3 {} 14 . 3
18. # THE WAY TO GO .widget {} .widget__title {} .widget__title­­smaller {} .widget__body {} .widget__body­­large {} 14 . 4
19. 2 # ORGANISER /styleguide 15 . 1
20. /PAGES /UTILITIES ... 15 . 2
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
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
23. 4 # DOCUMENTEZ Et oui. 17 . 1
24. DOCUMENTER SES CSS ? et :) ou http://24ways.org/2011/front-end-style-guides/ DSS sa tâche Grunt KSS kaleistyleguide styledocco 17 . 2
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
26. BONUS Bientôt dans un post Truc et astuces pour refactoriser une CSS bien moche 18
27. NETTOYER VOS CSS ! BY @MOOX ON & / MAXIME THIROUIN / TWITTER GITHUB MOOX.IO 19