$30 off During Our Annual Pro Sale. View Details »

Why we should write CSS-in-JS

Azizi Yazit
October 24, 2019

Why we should write CSS-in-JS

KL React meetup

Azizi Yazit

October 24, 2019
Tweet

More Decks by Azizi Yazit

Other Decks in Research

Transcript

  1. SaSS / ScSS Preprocessor that is compiled to CSS Mixins

    Variables Functions Extend + + + = Awesome CSS, but…..
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. Same CSS but free from style conflicts Frustrations of the

    class name collisions and specificity wars
  12. 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
  13. Single File Component By eliminate the source order, SFC pattern

    is possible. For small component, this pattern is very handy.
  14. 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>
  15. Reusability Reuse ruleset const StyledButton = styled.button` ${props => props.disabled

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