CSS in JS - tzi.fr · aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style,...

32
CSS in JS

Transcript of CSS in JS - tzi.fr · aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style,...

Page 1: CSS in JS - tzi.fr · 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

CSS in JS

Page 2: CSS in JS - tzi.fr · 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

Les slides sont disponibles :

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

Avant de commencer...Avant de commencer...Avant de commencer...Avant de commencer...Avant de commencer...

#2

Page 3: CSS in JS - tzi.fr · 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

CSS in JSC'est quoi exactement ?

Page 4: CSS in JS - tzi.fr · 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

CSS in JSCSS in JSCSS in JSCSS in JSCSS in JS

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

Page 5: CSS in JS - tzi.fr · 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

CSS in Markup ?CSS in Markup ?CSS in Markup ?CSS in Markup ?CSS in Markup ?

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

Page 6: CSS in JS - tzi.fr · 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

Real CSS in JSReal CSS in JSReal CSS in JSReal CSS in JSReal CSS in JS

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

Page 7: CSS in JS - tzi.fr · 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

Sass in JSSass in JSSass in JSSass in JSSass in JS

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

Page 8: CSS in JS - tzi.fr · 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

Thomas Zilliox.

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

Je suis un expert CSS indépendant.

Qui suis-je ?Qui suis-je ?Qui suis-je ?Qui suis-je ?Qui suis-je ?

#8

Page 9: CSS in JS - tzi.fr · 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

Adoption de CSS in JSAdoption de CSS in JSAdoption de CSS in JSAdoption de CSS in JSAdoption de CSS in JS

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

Page 10: CSS in JS - tzi.fr · 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

L'ouverture d'espritCSS in JS is not welcome here

Page 11: CSS in JS - tzi.fr · 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

Adoption des CSS atomiquesAdoption des CSS atomiquesAdoption des CSS atomiquesAdoption des CSS atomiquesAdoption des CSS atomiques

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

Page 12: CSS in JS - tzi.fr · 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

Adoption de BEMAdoption de BEMAdoption de BEMAdoption de BEMAdoption de BEM

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

Page 13: CSS in JS - tzi.fr · 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

Adoption de SassAdoption de SassAdoption de SassAdoption de SassAdoption de Sass

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

Page 14: CSS in JS - tzi.fr · 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

Adoption d'un seul outil ?Adoption d'un seul outil ?Adoption d'un seul outil ?Adoption d'un seul outil ?Adoption d'un seul outil ?

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

Page 15: CSS in JS - tzi.fr · 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

Le CSS-in-JS est réel !

Page 16: CSS in JS - tzi.fr · 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

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

Le CSS-in-JS est réel !Le CSS-in-JS est réel !Le CSS-in-JS est réel !Le CSS-in-JS est réel !Le CSS-in-JS est réel !

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

Page 17: CSS in JS - tzi.fr · 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

Les objectifs du CSS in JS

Page 18: CSS in JS - tzi.fr · 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

OOCSS, SMACSS et BEM avec les sélecteurs.

CSS in JS directement avec les noeuds HTML.

1. L'isolation des styles1. L'isolation des styles1. L'isolation des styles1. L'isolation des styles1. L'isolation des styles

#18

Page 19: CSS in JS - tzi.fr · 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

2. Le nommage des classes2. Le nommage des classes2. Le nommage des classes2. Le nommage des classes2. Le nommage des classes

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

Page 20: CSS in JS - tzi.fr · 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

Pas de code mortStyles fusionnésCalcul du chemin critique

3. L'optimisation3. L'optimisation3. L'optimisation3. L'optimisation3. L'optimisation

#20

Page 21: CSS in JS - tzi.fr · 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

JavaScriptpackages (npm)transpilers (babel)builders (webpack)linters (eslint, prettier)

4. L'écosystème JavaScript4. L'écosystème JavaScript4. L'écosystème JavaScript4. L'écosystème JavaScript4. L'écosystème JavaScript

#21

Page 22: CSS in JS - tzi.fr · 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

4. L'écosystème JavaScript4. L'écosystème JavaScript4. L'écosystème JavaScript4. L'écosystème JavaScript4. L'écosystème JavaScript

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

Page 23: CSS in JS - tzi.fr · 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

5. Aller plus loin que le web5. Aller plus loin que le web5. Aller plus loin que le web5. Aller plus loin que le web5. Aller plus loin que le web

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

Page 24: CSS in JS - tzi.fr · 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

Le CSS in JS aujourd'hui

Page 25: CSS in JS - tzi.fr · 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

Pas de solution leaderDes solutions liées à ReactPerte de l'ecosystème SassPerte de l'IDE

Le CSS in JS aujourd'huiLe CSS in JS aujourd'huiLe CSS in JS aujourd'huiLe CSS in JS aujourd'huiLe CSS in JS aujourd'hui

#25

Page 26: CSS in JS - tzi.fr · 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

Conclusion

Page 27: CSS in JS - tzi.fr · 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

Le CSS in JS est un doux rêve :Je code en composant : CSS lié au HTMLJe livre un site optimisé : CSS séparé du HTML

ConclusionConclusionConclusionConclusionConclusion

https://twitter.com/markdalgleish/status/876187526809083904 #27

Page 28: CSS in JS - tzi.fr · 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

ConclusionConclusionConclusionConclusionConclusion

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

Page 29: CSS in JS - tzi.fr · 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

Le CSS in JS va rapprocher les développeurs des intégrateurs en fusionnant :Leur langagesLeur outilsLeur fichiers...

ConclusionConclusionConclusionConclusionConclusion

#29

Page 30: CSS in JS - tzi.fr · 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

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

ConclusionConclusionConclusionConclusionConclusion

#30

Page 31: CSS in JS - tzi.fr · 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

Des questions ?

@iamtzitzi.fr/slides/kiwi2017

tzi.fr/slides/kiwi2017.pdf

Merci !Merci !Merci !Merci !Merci !

#31

Page 32: CSS in JS - tzi.fr · 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