Chapter 4
Styling in JavaScript with Styled-Components

Take a moment to consider the unlikely origins of the web as an app platform. When Tim Berners-Lee wrote the original web server and browser in 1990, web pages were written in a single language: HTML. HTML could only convey raw content; the way that content was presented was left to the browser. Gradually, a handful of stylistic choices were added to the markup language. Authors started to embellish their sites with (often garish) color and font choices, not to mention the infamous <marquee> tag. With the introduction of CSS in 1996, the aesthetic choices available to web designers exploded.

Around the same time that CSS was making headway, JavaScript began to bring interactivity to the web. The introduction of Gmail in 2004 proved that it was possible to build web apps that could rival their desktop counterparts, and with obvious advantages: no installation, instant updates, and access from any web-capable device. Developers flocked to the new platform. Since then, the three languages of the web—HTML, CSS, and JavaScript—have co-evolved, adding features to better complement each other. Miraculously, that evolution has allowed the web to compete with native app platforms even though none of its languages were invented with apps in mind.

Fast-forward to today. React has transformed web development by allowing developers to express the page’s markup as a function of application state. But CSS remains largely static. In React apps that follow the tradition of keeping JavaScript and CSS separate, a layer of indirection is required in order to apply CSS rules based on application state: developers must write React components that render elements with particular class names based on their state, then write CSS rules for those class names to express the desired styles. As the list of CSS rules grow, developers inevitably struggle to keep them organized. The situation gets worse when components want to override the styles of other components they render, as “specificity wars” break out between the competing CSS rules.

Happily, there’s a solution for many of these problems: CSS-in-JS, a paradigm exemplified by the popular styled-components library. With CSS-in-JS, you write styles using the familiar CSS syntax, but the actual style rules are generated at runtime as needed. This has enormous advantages for code organization and maintainability. And, not incidentally for the topic of this book, it also allows style rules to be subjected to unit tests.

In this chapter, you’ll add styling to our carousel components from the previous chapter using styled-components. You’ll make assertions about the components’ styles using Enzyme, and capture them with Jest’s snapshots feature. But before you start styling, let’s take a brief digression into webpack, a tool that bridges the gap between your components and the browser.