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