css in js - tzi.fr · aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style,...
TRANSCRIPT
![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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/1.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/2.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/3.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/5.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/6.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/7.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/8.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/9.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/10.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/11.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/12.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/13.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/14.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/15.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/16.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/17.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/18.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/19.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/20.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/21.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/22.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/23.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/24.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/25.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/26.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/27.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/28.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/29.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/30.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/31.jpg)
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](https://reader030.vdocuments.net/reader030/viewer/2022040215/5ecd163b381ce046273d92d0/html5/thumbnails/32.jpg)