Dive into Styled Components

By Grayson Hicks

Elevator Pitch

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.

Description

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

Notes

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!