Introduction to CSS and JS

CSS in JS techniques and libraries seem to have taken the frontend ecosystem by storm. Is this a storm that will be weathered by more traditional approaches (like CSS) or is there some real some value provided by these techniques and can adopting CSS in JS cause a marked and drastic improvement in code quality, developer experience, and ease-of-use in your applications?

This course, as you might imagine, posits the latter. I presume some basic understanding of CSS, React, and JavaScript, but don’t at all feel out of your depth if any of those disparate technologies are somewhat out of your depth. I’ll be sure to define and explain concepts, terms, and other areas that may be confusing on our journey. After all, it does feel sometimes when you learn anything in the frontend space that you’re not just learning that thing but a host of other foundational concepts, and CSS in JS is no different.

Through this course, I’ll gently guide you on the foundational concepts and techniques that power CSS in JS by leveraging the library styled-components with React. styled-components is a library that implements CSS in JS techniques that is built with React. React is, of course, a library that has grown increasingly in popularity and acclaim and we’ll be using this pair in tandem to explain and instrument CSS in JS techniques.

We’ll be building all kinds of cool things, and you’ll leave this course with a great understanding of CSS in JS and will feel empowered to adopt these techniques and begin reaping the benefits that CSS in JS provides.

With all of that said, I hope you’re just as excited as I am about CSS in JS with styled-components, so we’ll start this off by first taking a step back and defining just what exactly CSS in JS actually is and what I mean when I use the term CSS in JS.