Dumb CSS-in-JS

@MoOx Dumb CSS-in-JS 1

@MoOx 2 https://moox.io/ @MoOx Max Thirouin • PostCSS • cssnext
• reason-react-native • … Known for its contributions to… putaindecode.io

@MoOx 3

@MoOx Dumb CSS-in-JS Ode à la simplicité 4

@MoOx 5 🥵

@MoOx SEPARATION OF CONCERN 6

@MoOx <div style=“font-size: 120px”> 7

@MoOx 8 <div style=“font-size: 120px”> <HTML>… Web only 🥴

@MoOx 9 What if…

@MoOx 10 <View style={{ fontSize: “120px”}}> What if…

@MoOx PLATFORMS iOS Android Windows macOS Web … 11 📱
💻 🪟 🪟 🤖 🕸 

@MoOx React Native 12 (And The StyleSheet)

@MoOx 13

@MoOx 14

@MoOx Rajouter un composant Pseudo-Element? 15 https://putaindecode.io/articles/introduction-a-rud

@MoOx On fait du JS Servez vous en et vous
pourrez même faire mieux que du hover. Pseudo-selector? 16

@MoOx En ben tant mieux! Pas d’effet de bord, enfin!
Selector > * + {} = mdr { 17

@MoOx Responsive? 18 1. Souvent pas tant besoin que ça.
Faites des UIs simples. 2.Du responsive sans media queries c’est possible 3.`onLayout` équivalent des element query! https://putaindecode.io/articles/responsive-sans-media-queries/ https://reactnative.dev/docs/view#onlayout

@MoOx Cas particulier? 19 Simple à gérer via de la
programmation

@MoOx En pratique, ça donne quoi? 20

@MoOx 1. Un peu de styles statiques avec indirection 2.
Un peu de spacer ou de wrapper au besoin 3. Valeur dynamiques comme les couleurs dans le contexte pratique pour le côté themeable (ex: Dark Mode) 21 https://putaindecode.io/articles/l-anti-divite-c-est-pas-automatique

@MoOx import Styles from “./static-styles” import SpacedView from “./SpacedView” const
theme = useTheme(); <View style={[ Styles.center, theme.background ]}> <SpacedView horizontal=“M” vertical=“S”> <Text style={[Styles.textLarge, theme.textLight ]}> 22

@MoOx 23 https://reason-react-native.github.io/en/docs/apis/Style/

@MoOx 24 INDIRECTIONS* *= COHERENCE

@MoOx Sauf exception • Nommer vos valeurs* • Pas de
valeurs numériques “aléatoire” 25 * Oui c’est compliqué

@MoOx Bonus 26

@MoOx 27 https://github.com/MoOx/LifeTime/blob/ 5ce54e13096642da02e46bf54b48548f7b5b1890/ src/components/shareable/Theme.res#L245-L270 https://github.com/MoOx/react-multiversal/blob/master/src/SpacedView.re https://github.com/MoOx/react-multiversal https://github.com/MoOx/LifeTime

@MoOx React Native avec props d’accessibilité → tag html auto
28 https://reactnative.dev/docs/accessibility https://necolas.github.io/react-native-web/docs/?path=/docs/guides-accessibility--page

@MoOx React Native Web StyleSheet = Auto atomic CSS 29

@MoOx 30

@MoOx Animation simple, performante et réaliste avec Animated 31 https://moox.io

@MoOx Faites VOS briques petit à petit, au besoin SANS
ABSTRAIRE PRÉMATURÉMENT. 32

@MoOx « Oui mais tout ça je peux le faire
en CSS » 33 • Effort de maintenance supérieur. • CSS a été désigné pour ajouter des « skins » à des documents • Ce côté “modifiable” n’a aucun sens pours des produits de qualité • L’UX a besoin de chose bien défini et non modifiable.

@MoOx Peut être ça ne colle pas à vos besoin
du moment mais prenez juste le temps de savoir pourquoi 34 https://putaindecode.io/articles/pourquoi-j-ai-arrete-d-utiliser-css/

@MoOx Ne vous bloquer pas sur vos connaissances et expérimenter.
Les choix sont toujours une question de compromis 35 https://putaindecode.io/articles/tradeoffs

@MoOx N’ayez pas peur d’utiliser des choses simples qui ont
l’air stupide. 36 https://putaindecode.io/articles/2021-01-29-ecrivez-du-code-stupide

@MoOx 1. Facile à lire car concentré à l’endroit où
il a du sens 2. Explicite car directe pas de side effects de sélecteur ou des pseudo-elements etc 3. Supprimable car localisé la où il est utilisé 37

@MoOx 38 Questions ? https://moox.io/ @MoOx Max Thirouin 🤔

Dumb CSS-in-JS

Dumb CSS-in-JS

More Decks by Maxime Thirouin

Other Decks in Technology

Featured

Transcript