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

Dumb CSS-in-JS

Dumb CSS-in-JS

Maxime Thirouin

February 04, 2021
Tweet

More Decks by Maxime Thirouin

Other Decks in Technology

Transcript

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

    • reason-react-native • … Known for its contributions to… putaindecode.io
  2. @MoOx On fait du JS Servez vous en et vous

    pourrez même faire mieux que du hover. Pseudo-selector? 16
  3. @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
  4. @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
  5. @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
  6. @MoOx Sauf exception • Nommer vos valeurs* • Pas de

    valeurs numériques “aléatoire” 25 * Oui c’est compliqué
  7. @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
  8. @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.
  9. @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/
  10. @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
  11. @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
  12. @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