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
    Dumb CSS-in-JS
    1

    View full-size slide

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


    • cssnext


    • reason-react-native


    • …
    Known for its contributions to…
    putaindecode.io

    View full-size slide

  3. @MoOx
    Dumb CSS-in-JS


    Ode à la simplicité
    4

    View full-size slide

  4. @MoOx
    SEPARATION


    OF CONCERN
    6

    View full-size slide

  5. @MoOx
    8

    … Web only 🥴

    View full-size slide

  6. @MoOx
    9
    What if…

    View full-size slide

  7. @MoOx
    10

    What if…

    View full-size slide

  8. @MoOx
    PLATFORMS


    iOS


    Android


    Windows


    macOS


    Web



    11
    📱
    💻
    🪟
    🪟
    🤖
    🕸

    View full-size slide

  9. @MoOx
    React Native
    12
    (And The StyleSheet)

    View full-size slide

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

    View full-size slide

  11. @MoOx
    On fait du JS


    Servez vous en et vous pourrez
    même faire mieux que du hover.
    Pseudo-selector?
    16

    View full-size slide

  12. @MoOx
    En ben tant mieux!


    Pas d’effet de bord, enfin!
    Selector > * + {} = mdr {
    17

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. @MoOx
    En pratique,


    ça donne quoi?
    20

    View full-size slide

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

    View full-size slide

  17. @MoOx
    import Styles from “./static-styles”


    import SpacedView from “./SpacedView”


    const theme = useTheme();











    22

    View full-size slide

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

    View full-size slide

  19. @MoOx
    24
    INDIRECTIONS*
    *= COHERENCE

    View full-size slide

  20. @MoOx
    Sauf exception


    • Nommer vos valeurs*


    • Pas de valeurs numériques “aléatoire”
    25
    * Oui c’est compliqué

    View full-size slide

  21. @MoOx
    Bonus
    26

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. @MoOx
    React Native Web StyleSheet


    =


    Auto atomic CSS
    29

    View full-size slide

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

    View full-size slide

  26. @MoOx
    Faites VOS briques petit à petit, au besoin


    SANS ABSTRAIRE PRÉMATURÉMENT.


    32

    View full-size slide

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

    View full-size slide

  28. @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/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide