CSS in JS

Avant de commencer...

CSS in JS

C'est quoi exactement ?

CSS in JS

CSS in Markup ?

Real CSS in JS

Sass in JS

Qui suis-je ?

Thomas Zilliox.

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

Je suis un expert CSS indépendant.

Adoption de CSS in JS

L'ouverture d'esprit

CSS in JS is not welcome here

Adoption des CSS atomiques

Adoption de BEM

Adoption de Sass

Adoption d'un seul outil ?

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

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.

2. Le nommage des classes

3. L'optimisation

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

4. L'écosystème JavaScript

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

4. L'écosystème JavaScript

5. Aller plus loin que le web

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

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

Conclusion

Conclusion

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

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

Conclusion

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

Merci !

Des questions ?

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