By default, Vue and Angular ship with the ability to encapsulate styles using something similar to CSS modules. Let's explain how it works, and how you can use it in your application!

Getting started with CSS in JS techniques could not be easier, but there's still some necessary set up and explanation. Let's dive in!

Theming has long been a desired functionality in traditional applications, even something has simple as a light and/or dark mode. See how simple and intuitive theming is with styled-components!

CSS in JS seems to be an increasingly utilized and interesting technique seen on sites by Twitter, Microsoft, and others. In this section, we'll introduce this series of CSS in JS lessons.

Very few code bases get to be entirely new development. Given something like Bootstrap, Foundation, etc. how can we instrument CSS in JS while still allowing the usage of these component libraries?

Up to this point, we haven't seen the true power of CSS in JS. In this section, the power of CSS in JS will be made apparent, and we'll conditionally tweak styling easily, naturally, and quickly with prop driven development.

When the term "CSS in JS" is used, what does that really mean? In this section, we'll define the term, and give some examples of common libraries and techniques of CSS in JS.

Injecting "globals" (i.e. targeting body, html, etc.) is naturally possible with traditional CSS because traditional CSS is global. How do we use global styles with a CSS in JS architecture? Find out with this section!

The best libraries that instrument CSS in JS allow all the features of CSS that you know in love. In this section, we'll go into detail how to use traditional CSS functionality like media queries, pseudo styles, and more!

styled-components is arguably the most popular CSS in JS library in the React space, but it's by no means the only. Explore this section to learn more about libraries like glamorous, emotion, and other competitors to styled-components.

Server rendering CSS can be extremely challenging. How do we know which CSS is used on this page? And on the other? Which styles target which pages? Let's see how CSS in JS makes this concern trivial and demo server and static rendering with styled-components.

CSS Modules are an implementation of CSS in JS that is often seen as a great alternative to less traditional CSS in JS libraries like styled-components. In this section, I'll illustrate how to set up CSS modules and explain how they work!

Alright, you're sold on styled-components or at least the idea of CSS in JS. In this section, a concrete plan to begin implementing CSS in JS will be explained, and hopefully you can begin using these techniques as soon as possible!

For those who have used something like SASS or LESS, something like mixins, color utilies, etc. are oftentimes sorely missed. Is there anything equivalent with CSS in JS? (Uhm... yes)

With that set up out of the way, now we can roll up our sleeves and get to actually using CSS in JS. Let's create our first styled component with... styled-components!

OK OK CSS in JS is great. However, there can be certain circumstances where in order to keep your application silky smooth and performant, it may be advisable to not use CSS in JS, and instead use something like inline styles or traditional CSS. Let's see when those circumstances may arise!

Traditional CSS has leveraged (almost to a fault!) inheritance with cascading styles. In this section, we'll show the CSS in JS way to instrument inheritance and customizable components.

Just as important as what CSS in JS is is what CSS in JS is not, or at least not in its most useful form. In this section, common misconceptions of what CSS in JS is not will be dispelled.

styled-components largely requires React (although there is a Vue port). In this section, you'll learn of several libraries that do not require React and how to implement in your application.

OK OK CSS in JS is great. However, there can be certain circumstances where in order to keep your application silky smooth and performant, it may be advisable to not use CSS in JS, and instead use something like inline styles or traditional CSS. Let's see when those circumstances may arise!

It can't all be sunshine and rainbows, and of course especially in the frontend ecosystem there are few silver bullets. The drawbacks of CSS in JS will be fairly and accurately depicted in this section.

CSS Animation is a key mechanism in wowing users and designing experiences that delight. Let's go through how to implement animation with CSS in JS.