Why we should write CSS-in-JS

Transcript

1. 1.

   Why we should write KL React Meetup CSS in JS

2. 2.

   None
3. 3.

   None
4. 4.

   None
5. 5.

   I’m the one who use it first… use other class

   name, or …
6. 6.

   SaSS / ScSS Preprocessor that is compiled to CSS Mixins

   Variables Functions Extend + + + = Awesome CSS, but…..
7. 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
8. 8.

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

9. 9.

   External libraries 3rd party plugins CSS framework Breaking the Convention

10. 10.

    Scoped / Local Stylesheet Encapsulated CSS Web Components

11. 11.

    “Revolution Isn’t Smashing Something It Is Bringing Forth” Joseph Campbell

    (American writer)
12. 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
13. 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
14. 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
15. 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
16. 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
17. 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
18. 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
19. 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
20. 20.

    Should us?

21. 21.

    Same CSS but free from style conflicts Frustrations of the

    class name collisions and specificity wars
22. 22.

    state-based styling <Button secondary value=‘secondary’ /> <Button primary value=‘primary’ />

    <Button disabled value=‘disabled’ /> API to describe state-based styles in a better way than using a bunch of conditional class names
23. 23.

    Critical rendering styles Send only the critical CSS to the

    user for a rapid first paint
24. 24.

    Single File Component By eliminate the source order, SFC pattern

    is possible. For small component, this pattern is very handy.
25. 25.

    Inline styling Yes! with pseudos and media queries

26. 26.

    Utility components serves as a wrapper component for most of

    the CSS utility needs. <Box p={‘10px 5px’} m={‘10px 5px’} > <Component1 /> </Box> <Box m={‘10px 5px’} display={‘flex’} justifyContent={‘center’} alignItems={‘center’} > <Component1 /> </Box>
27. 27.

    Reusability Reuse component <Article p={‘10px 5px’ m={‘10px 5px’}> <Component1 />

    </Article>
28. 28.

    Reusability Reuse ruleset const StyledButton = styled.button` ${props => props.disabled

    && css` ${disabled} ` ` const StyledContainer = styled(Box)` overflow: auto; max-height: 300px; ${customScrollbar} `
29. 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!
30. 30.

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