Utility Classes: Why Are We Not Using XYZ Instead?

Utility classes aren’t the only way to apply styles to your markup. There are hundreds of different CSS tools that developers use to help build their styles. Many of these tools fall under broader umbrellas like CSS-in-JS and CSS preprocessors. In this lesson, we’ll just skim over a few of these tools. I’ll cover what these tools are, what they’re great for, and why we’re not using them in this course.

Why are we writing CSS and not using other solutions, like CSS-in-JS?

CSS-in-JS is a way of creating CSS where the developer writes and applies their styles using JavaScript. Some of the most popular CSS solutions, like Styled Components, and Emotion, are CSS-in-JS. These solutions have become very popular because they allow JavaScript developers to scope their styles to components while also keeping the styles colocated with their components.

Let’s take a look at one CSS-in-JS solution, Style Components. Here’s what one of the album cover UI elements would look like when written using Styled Components:

const Cover = styled.h1`
  aspect-ratio: 1/````