JavaScript Everywhere

Chapter 13. Styling an Application

In his 1978 track “Lip Service,” Elvis Costello sneers the line “don’t act like you’re above me, just look at your shoes.” This kiss-off implies that the narrator can detect an attempt at elevated social status simply by seeing someone’s shoes, no matter how finely pressed their suit or how elegant their dress. For better or worse, style is a major part of human culture, and we’re all accustomed to picking up on these types of social cues. Archaeologists have even found that humans in the Upper Paleolithic era created necklaces and bracelets from bones, teeth, berries, and stone. Our clothes not only serve the functional purpose of protecting our bodies from the elements, but may also communicate to others information about our culture, social status, interests, and so much more.

A web application is functional without anything beyond the default styles of the web, but by applying CSS we are able to more clearly communicate with our users. In this chapter, we’ll explore how we can use the CSS-in-JS Styled Components library to introduce layout and style to our application. This will allow us to make a more usable and aesthetically pleasing application within a maintainable, component-based, code structure.

Creating a Layout Component

Many, or in our case all, pages of an application will share a common layout. For example, all the pages of our application will have a header, a sidebar, and a content area (Figure 13-1). Rather than import the ...