Emma Bostian
Spotify
Check out a free preview of the full Design Systems with React & Storybook course
The "CSS in JS" Lesson is part of the full, Design Systems with React & Storybook course featured in this preview video. Here's what you'd learn in this lesson:
Emma explains that although CSS in JS is a controversial practice, it allows developers to scope styling to a single component.
Preview
CloseTranscript from the "CSS in JS" Lesson
[00:00:00]
>> But while this is a better solution, and while this does allow for scoping, we have a new solution which is CSS and JS. This is something a little controversial but this really, really scope styling to the components themselves. Everything is encapsulated in one document. So as opposed to having separate SASS files that are transpiled into CSS code.
[00:00:22]
We can actually just write our CSS inside of our React components, so we use JavaScript styler components. And when our components are parsed, it then generates the CSS and attaches it to the DOM. So we're gonna be using styled components today. There are other libraries like Emotion, is another popular one for React.
[00:00:40]
It's also a great choice, but we're gonna be using styled components.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops