CSS in JS

Avant de commencer...

Les slides sont disponibles :

https://tzi.fr/slides/blend2017
https://tzi.fr/slides/blend2017.pdf

2

CSS in JS

C'est quoi exactement ?

CSS in JS

https://speakerdeck.com/vjeux/react-css-in-js?slide=26 4

CSS in Markup ?

https://twitter.com/thierrykoblentz/status/867425115062939648 5

Real CSS in JS

https://github.com/styled-components/styled-components 6

Sass in JS

https://github.com/soluml/pre-style 7

Qui suis-je ?

Thomas Zilliox.

Intégrateur, Développeur, Formateur, Auteur.

Je suis un expert CSS indépendant.

8

Adoption de CSS in JS

https://twitter.com/Real_CSS_Tricks/status/754045216449933312 9

L'ouverture d'esprit

CSS in JS is not welcome here

Adoption des CSS atomiques

https://twitter.com/leaverou/status/686651368736698370 11

Adoption de BEM

https://twitter.com/maxlynch/status/623161261975429120 12

Adoption de Sass

https://twitter.com/cedmax/status/338216261160947712 13

Adoption d'un seul outil ?

https://twitter.com/SaraSoueidan/status/898234232195174400 14

Le CSS-in-JS est réel !

Le CSS-in-JS est réel !

aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style, bloody-react-styled, classy, csjs, css-constructor, css-light, css-loader, css-ns, cssobj, cssx-loader, emotion, es-css-modules, glamor, glamorous, hyperstyles, i-css, j2c, jsxstyle, linaria, pre-style, radium, react-css-builder, react-css-components, react-css-modules, react-cssom, react-cxs, react-fela, react-free-style, react-inline-css, react-inline-style, react-inline, react-jss, react-look, react-native-web, react-statics-styles, react-styl, react-style, react-styleable, react-stylematic, react-theme, react-vstyle, reactcss, restyles, scope-styles, smart-css, stile, react-media-queries, stilr, style-it, styled-components, styled-jsx, styletron-react, styling, superstyle, typestyle, uranium

https://github.com/MicheleBertoli/css-in-js 16

Les objectifs du CSS in JS

1. L'isolation des styles

OOCSS, SMACSS et BEM avec les sélecteurs.

CSS in JS directement avec les noeuds HTML.

18

2. Le nommage des classes

https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660 19

3. L'optimisation

  • Pas de code mort
  • Styles fusionnés
  • Calcul du chemin critique
20

4. L'écosystème JavaScript

  • JavaScript
  • packages (npm)
  • transpilers (babel)
  • builders (webpack)
  • linters (eslint, prettier)
21

4. L'écosystème JavaScript

https://github.com/eduardoboucas/include-media/blob/master/src/helpers/_to-number.scss 22

5. Aller plus loin que le web

https://facebook.github.io/yoga/ 23

Le CSS in JS aujourd'hui

Le CSS in JS aujourd'hui

  • Pas de solution leader
  • Des solutions liées à React
  • Perte de l'ecosystème Sass
  • Perte de l'IDE
25

Conclusion

Conclusion

Le CSS in JS est un doux rêve :

  • Je code en composant : CSS lié au HTML
  • Je livre un site optimisé : CSS séparé du HTML
https://twitter.com/markdalgleish/status/876187526809083904 27

Conclusion

http://www.didoo.net/2017/10/let-there-be-peace-on-css/ 28

Conclusion

Le CSS in JS va rapprocher les développeurs des intégrateurs en fusionnant :

  • Leur langages
  • Leur outils
  • Leur fichiers
  • ...
29

Conclusion

Mais ce n'est pas pour tout de suite :)

30

Merci !

Des questions ?

@iamtzi
tzi.fr/slides/kiwi2017
tzi.fr/slides/kiwi2017.pdf

31