Why we should write CSS-in-JS

KL React meetup

Transcript

1. Why we should write
   KL React Meetup
   CSS in JS
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. I’m the
   one who use it
   first…
   use other
   class name, or
   …
   

   View Slide

6. SaSS / ScSS
   Preprocessor that is compiled to CSS
   Mixins Variables Functions Extend
   + + +
   = Awesome CSS, but…..
   

   View Slide

7. Conventions
   OOCSS
   SMACSS
   BEM
   C-BEUT
   ITCSS
   Object Oriented CSS
   Scalable Modular Architecture CSS
   Block Element Modifier
   Cascade, Block, Element, Utility and Token
   Inverted Triangle CSS
   Nicole Sullivan
   Jonathan Snook
   Yandex
   Andy Bell
   Harry Roberts
   

   View Slide

8. SaSS + BEM
   image taken from https://medium.com/@ZeeCoder/a-practical-introduction-to-the-bem-css-methodology-eeef578bac8c
   

   View Slide

9. External libraries
   3rd party plugins
   CSS framework
   Breaking the Convention
   

   View Slide

10. Scoped / Local Stylesheet
    Encapsulated CSS
    Web Components
    

    View Slide

11. “Revolution Isn’t Smashing Something It Is Bringing Forth”
    Joseph Campbell (American writer)
    

    View Slide

12. css in JS?
    $(‘.domNodeClassName’).css({paddingTop: 20, color: red})
    $(‘.domNodeClassName’).setStyle({paddingTop: 20, color: red})
    domStyle(domNode, {paddingTop: 20, color: red})
    Cool but no pseudo & media queries
    

    View Slide

13. Aphrodite
    Styletron
    CXS
    emotion
    CSS-in-JS
    movement
    “I knew it was going to be controversial but I had
    absolutely no idea that it would generate an
    entire movement of people building out libraries
    around it”
    vjeux
    

    View Slide

14. Stop using it!
    It’s almost like saying “we’re doing everything
    in JS” gives developers permission to flush a
    few decades’ worth of HTML/CSS best practices
    down the toilet
    Brad Frost
    The creator of Atomic Design
    Please aren’t saying “CSS is broken” because of
    browser bugs. They are saying it because they
    don’t understand CSS & want it to be like JS.
    Jen Simmons
    Member of the CSS Working Group
    CSS-in-JS is a cry for help
    Lea Verou
    Invited Expert to the CSS Working Group
    

    View Slide

15. Stop using it!
    It’s almost like saying “we’re doing everything
    in JS” gives developers permission to flush a
    few decades’ worth of HTML/CSS best practices
    down the toilet
    Brad Frost
    The creator of Atomic Design
    Please aren’t saying “CSS is broken” because of
    browser bugs. They are saying it because they
    don’t understand CSS & want it to be like JS.
    Jen Simmons
    Member of the CSS Working Group
    CSS-in-JS is a cry for help
    Lea Verou
    Invited Expert to the CSS Working Group
    help
    best practices
    css is broken
    

    View Slide

16. Use it, but….
    Does CSS-in-JS scare me? Yes, of course. But not
    because it’s wrong. It’s because that evolution
    renders my detailed knowledge of the cascade
    obsolete.
    If you really love CSS, than it shouldn’t matter
    if you writing in its own file, a function, js, a
    string….
    Nicole Sullivan
    Frameworks PM, Google Chrome, Creator of OOCSS
    Adam Argley
    Chrome CSS Developer Advocate at Google
    I’ve seen talks from prominent figures in the CSS-
    in-JS community, and I think that they definitely
    address real problems, and I’m glad that they’re
    working on solutions, but I’m still not sold.
    Harry Roberts
    invited Google Developer Expert
    

    View Slide

17. Use it, but….
    Does CSS-in-JS scare me? Yes, of course. But not
    because it’s wrong. It’s because that evolution
    renders my detailed knowledge of the cascade
    obsolete.
    If you really love CSS, than it shouldn’t matter
    if you writing in its own file, a function, js, a
    string….
    Nicole Sullivan
    Frameworks PM, Google Chrome, Creator of OOCSS
    Adam Argley
    Chrome CSS Developer Advocate at Google
    I’ve seen talks from prominent figures in the CSS-
    in-JS community, and I think that they definitely
    address real problems, and I’m glad that they’re
    working on solutions, but I’m still not sold.
    Harry Roberts
    invited Google Developer Expert
    But not
    because it’s wrong
    If you really love CSS
    they definitely
    address real problems
    

    View Slide

18. You should use it
    By moving from mere convention towards
    enforcing locally-scoped styles by default, we’ve
    now improved the baseline quality of our styles.
    Primarily, CSS-in-JS boosts my confidence.
    I can add, change and delete CSS without any
    unexpected consequences.
    Mark Dalgleish
    CSS-modules co-creator
    Max Stoiber
    Styled-component co-creator
    Ideally, I'd like CSS-in-JS to become a proving
    ground for new ideas, that can get subsumed into
    future CSS specs, the way Sass has done
    Glen Maddern
    Styled-component & CSS-modules co-creator
    

    View Slide

19. You should use it
    By moving from mere convention towards
    enforcing locally-scoped styles by default, we’ve
    now improved the baseline quality of our styles.
    Primarily, CSS-in-JS boosts my confidence.
    I can add, change and delete CSS without any
    unexpected consequences.
    Mark Dalgleish
    CSS-modules co-creator
    Max Stoiber
    Styled-component co-creator
    Ideally, I'd like CSS-in-JS to become a proving
    ground for new ideas, that can get subsumed into
    future CSS specs, the way Sass has done
    Glen Maddern
    Styled-component & CSS-modules co-creator
    by default
    unexpected consequences
    future CSS specs
    

    View Slide

20. Should us?
    

    View Slide

21. Same CSS but free from style conflicts
    Frustrations of the class name collisions and specificity wars
    

    View Slide

22. state-based styling
    
    secondary
    
    value=‘secondary’
    
    />
    
    primary
    
    value=‘primary’
    
    />
    
    disabled
    
    value=‘disabled’
    
    />
    API to describe state-based styles in a better way than using a bunch of conditional class names
    

    View Slide

23. Critical rendering styles
    Send only the critical CSS to the user for a rapid first paint
    

    View Slide

24. Single File Component
    By eliminate the source order, SFC
    pattern is possible. For small
    component, this pattern is very
    handy.
    

    View Slide

25. Inline styling
    Yes! with pseudos and media queries
    

    View Slide

26. Utility components
    serves as a wrapper component for most of the CSS utility needs.
    
    p={‘10px 5px’}
    
    m={‘10px 5px’}
    
    >
    
    
    
    
    
    m={‘10px 5px’}
    
    display={‘flex’}
    
    justifyContent={‘center’}
    
    alignItems={‘center’}
    
    >
    
    
    
    
    

    View Slide

27. Reusability
    Reuse component
    
    
    
    
    
    

    View Slide

28. Reusability
    Reuse ruleset
    const StyledButton = styled.button`
    
    ${props => props.disabled && css`
    
    ${disabled}
    
    `
    
    `
    const StyledContainer = styled(Box)`
    
    overflow: auto;
    
    max-height: 300px;
    
    ${customScrollbar}
    
    `
    

    View Slide

29. Conclusion
    • Component styles should be scoped and isolated by default to its
    component.
    
    • Conventions is unwritten law that doesn’t enforce people to obey it.
    
    • CSS-in-JS is a solution for real problems.
    
    • CSS with combination of JS offered cool out-of-the-box features.
    You should write CSS in JS!
    

    View Slide

30. Thank you!
    • https://github.com/abumuawiyah/react-meetup-24oct19
    
    • https://speakerdeck.com/aziziyazit/why-we-should-write-
    css-in-js.
    

    View Slide