Introduction to Styled Components & The World of CSS-in-JS
graysonhicks
If you've been working with decoupled Drupal and React, you've probably come across different CSS-in-JS libraries. 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 a particularly excellent complement to JSX. I'll cover:
- What is CSS-in-JS?
- The CSS-in-JS Spectrum
- What is styled-components?
- How does it work?
- Getting Started
- JSX's Best Friend
- Next Steps/Resources
Attendees should be familiar with Javascript, CSS, and React. Other JS libraries can you CSS-in-JS, but styled-components is React specific. Hopefully when you walk away, you will understand the basics of CSS-in-JS, its pros and cons, and have an open mind about incorporating it into your decoupled workflow!