Future Friendly CSS - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

FRONT-END 2

Slide 3

Slide 3 text

FRONT-END SOURCE 3

Slide 4

Slide 4 text

CSS OUTPUT 4

Slide 5

Slide 5 text

LA FEUILLE DE STYLE 5 . 1

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Et donc ? 6

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

MAIS AU FAIT LE PROBLEME C'EST QUOI ? 9

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

RAPPEL Il faut souﬀrir pour être beau. 11

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

# THE WAY TO GO .widget {} .widget__title {} .widget__titlesmaller {} .widget__body {} .widget__bodylarge {} 14 . 4

Slide 19

Slide 19 text

2 # ORGANISER /styleguide 15 . 1

Slide 20

Slide 20 text

/PAGES /UTILITIES ... 15 . 2

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

4 # DOCUMENTEZ Et oui. 17 . 1

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

# 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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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