Leave your flames and preconceptions about CSS-in-JS at the door. I love CSS and JS no matter who’s where. I’ll talk about the benefits of, and why I love, the styled-components library. I’ll show you the fundamental power of styled-components, and illustrate why it’s my favorite complement to JSX.

Dive into styled-components

If you’ve been working with front-end Javascript libraries lately, you’ve probably come across different CSS-in-JS libraries as well. Did your heart melt? Or did your blood boil? There’s more to it than meets the eye. CSS-in-JS solutions vary wildly in their approach. I’ll do a dive into styled-components to illustrate where I believe it falls on the CSS-in-JS spectrum, why I love it, and show how I think it is an excellent complement to JSX. I’ll cover:

• What is CSS-in-JS?
• WHAT?! ARE YOU CRAZY?!
• The CSS-in-JS Spectrum
• What is styled-components?
• How does it work?
• CSS as a function
• Props
• Extends
• What does it generate?
• Getting Started
• JSX’s Best Friend
• Next Steps/Resources

This talk is for folks who are familiar with React (even though there is CSS-in-JS for other FE libs, this one focus’s on React). Also should be familiar with CSS. I love React, but was slow to transitioning to using CSS-in-JS, mainly due to being overwhelmed by the difference and volume of choices. I finally settled on styled-components, and it’s my go to when given the chance. I am a front-end developer for Mediacurrent. I am part of the group at Mediacurrent tasked with what CSS-in-JS React library we will be adopting for our use in enterprise level web apps. I’d love this talk to be a great dive in to a CSS-in-JS and avoid the flame wars around it. Thanks!