Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Future Friendly CSS

Future Friendly CSS

8607d86bc3aad23fbcaabf27d4295b4c?s=128

Maxime Thirouin

April 04, 2013
Tweet

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