Outline

We've covered a ton of ground on styling in Gatsby!

We started with global styles. We used inline styles in JSX and separate files, as well as a global stylesheet we imported in gatsby-browser.js. We then looked at CSS modules, a nice way to get some encapsulation. Finally, we looked at CSS-in-JS and used styled-components to update our Layout.

When choosing a styling approach in Gatsby, a lot of it is personal preference. It's possible to write bad CSS using any approach, just like it's possible to write good CSS using any approach. In the wild, I mostly see CSS-in-JS used with Gatsby, but you can feel free to use whatever you'd like.

Now it's time to move on to getting some data into our project. We've just been using plain old HTML, CSS, and JavaScript to build this site, despite all its fancy tooling. In the next tutorial we'll start to learn how to Gatsby uses GraphQL to handle data. Don't miss it!