Why we should write KL React Meetup CSS in JS 

No content

No content

No content

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

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

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 

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

External libraries 3rd party plugins CSS framework Breaking the Convention 

Scoped / Local Stylesheet Encapsulated CSS Web Components 

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

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 

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 

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 

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 

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 

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 

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 

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 

Should us? 

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

state-based styling API to describe state-based styles in a better way than using a bunch of conditional class names 

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

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

Inline styling Yes! with pseudos and media queries 

Utility components serves as a wrapper component for most of the CSS utility needs. 

Reusability Reuse component 

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

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! 

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