View
42
Download
0
Category
Preview:
Citation preview
CSS in JS
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
CSS in JSC'est quoi exactement ?
CSS in JSCSS in JSCSS in JSCSS in JSCSS in JS
https://speakerdeck.com/vjeux/react-css-in-js?slide=26 #4
CSS in Markup ?CSS in Markup ?CSS in Markup ?CSS in Markup ?CSS in Markup ?
https://twitter.com/thierrykoblentz/status/867425115062939648 #5
Real CSS in JSReal CSS in JSReal CSS in JSReal CSS in JSReal CSS in JS
https://github.com/styled-components/styled-components #6
Sass in JSSass in JSSass in JSSass in JSSass in JS
https://github.com/soluml/pre-style #7
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
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
L'ouverture d'espritCSS in JS is not welcome here
Adoption des CSS atomiquesAdoption des CSS atomiquesAdoption des CSS atomiquesAdoption des CSS atomiquesAdoption des CSS atomiques
https://twitter.com/leaverou/status/686651368736698370 #11
Adoption de BEMAdoption de BEMAdoption de BEMAdoption de BEMAdoption de BEM
https://twitter.com/maxlynch/status/623161261975429120 #12
Adoption de SassAdoption de SassAdoption de SassAdoption de SassAdoption de Sass
https://twitter.com/cedmax/status/338216261160947712 #13
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
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
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
Les objectifs du CSS in JS
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
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
Pas de code mortStyles fusionnésCalcul du chemin critique
3. L'optimisation3. L'optimisation3. L'optimisation3. L'optimisation3. L'optimisation
#20
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
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
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
Le CSS in JS aujourd'hui
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
Conclusion
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
ConclusionConclusionConclusionConclusionConclusion
http://www.didoo.net/2017/10/let-there-be-peace-on-css/ #28
Le CSS in JS va rapprocher les développeurs des intégrateurs en fusionnant :Leur langagesLeur outilsLeur fichiers...
ConclusionConclusionConclusionConclusionConclusion
#29
Mais ce n'est pas pour tout de suite :)
ConclusionConclusionConclusionConclusionConclusion
#30
Des questions ?
@iamtzitzi.fr/slides/kiwi2017
tzi.fr/slides/kiwi2017.pdf
Merci !Merci !Merci !Merci !Merci !
#31
Recommended