Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dumb CSS-in-JS

Dumb CSS-in-JS

8607d86bc3aad23fbcaabf27d4295b4c?s=128

Maxime Thirouin

February 04, 2021
Tweet

Transcript

  1. @MoOx Dumb CSS-in-JS 1

  2. @MoOx 2 https://moox.io/ @MoOx Max Thirouin • PostCSS • cssnext

    • reason-react-native • … Known for its contributions to… putaindecode.io
  3. @MoOx 3

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

  5. @MoOx 5 🥵

  6. @MoOx SEPARATION OF CONCERN 6

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

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

  9. @MoOx 9 What if…

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

  11. @MoOx PLATFORMS iOS Android Windows macOS Web … 11 📱

    💻 🪟 🪟 🤖 🕸 
  12. @MoOx React Native 12 (And The StyleSheet)

  13. @MoOx 13

  14. @MoOx 14

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

  16. @MoOx On fait du JS Servez vous en et vous

    pourrez même faire mieux que du hover. Pseudo-selector? 16
  17. @MoOx En ben tant mieux! Pas d’effet de bord, enfin!

    Selector > * + {} = mdr { 17
  18. @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
  19. @MoOx Cas particulier? 19 Simple à gérer via de la

    programmation
  20. @MoOx En pratique, ça donne quoi? 20

  21. @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
  22. @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
  23. @MoOx 23 https://reason-react-native.github.io/en/docs/apis/Style/

  24. @MoOx 24 INDIRECTIONS* *= COHERENCE

  25. @MoOx Sauf exception • Nommer vos valeurs* • Pas de

    valeurs numériques “aléatoire” 25 * Oui c’est compliqué
  26. @MoOx Bonus 26

  27. @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

  28. @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
  29. @MoOx React Native Web StyleSheet = Auto atomic CSS 29

  30. @MoOx 30

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

  32. @MoOx Faites VOS briques petit à petit, au besoin SANS

    ABSTRAIRE PRÉMATURÉMENT. 32
  33. @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.
  34. @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/
  35. @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
  36. @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
  37. @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
  38. @MoOx 38 Questions ? https://moox.io/ @MoOx Max Thirouin 🤔