Global Styles I

Gatsby's default starter placed a lot of what I consider global style inside of layout.css. I knew I wanted my global styles to live at a higher level than this.

What happens if I remove layout.css?

My first thought was to just remove layout.css and see what happens. My hypothesis was that it would look not-so-good. It did not! There were things in layout.css necessary for a somewhat pleasing site!

App is my highest point

In my App component, I had the ThemeProvider component wrapping the whole site. To me, it made sense that App was where the global styles should live.

I did not want to try and convert all this CSS into Tailwind at this point since it was mostly already done. I knew I liked styled-components and I was somewhat familiar with using createGlobalStyle from styled-components. I decided to convert what I needed from layout.css into a GlobalStyles component.

Tailwind CSS considerations

Even though I did not convert this to Tailwind CSS, I knew I was going to try and use it at some point so I nudged some values so they were Tailwind equivalents. For example, 1.45rem became 1.5rem which is equivalent to m-6 in Tailwind. I did the best I could hoping it would be styled okay.

Margin Spacing

A lot of Gatsby's initial styling used margin-bottom to separate elements. I had planned on using margin-top. I had experience with it, and to quote something from Adam Wathan's Tailwind CSS tutorial:

When you add a top margin to the element making that element move feels better to me than when you add a bottom margin to an element and that actually pushes away other content. I like the idea that the element I'm adding a class to actually changes.

-- Adam Wathan

I found another article that I enjoyed that made the case for top margin.

• CSS: margin top vs bottom (a layout trick you should know)

I set the first-child's margin-top to 0 for the h1, h2, and p elements.

CSS variables

I started using CSS variables right away. I must say, they are quite handy and not just for implementing dark mode! At this point, I'm only using them for colors.

The current App component

At this point, I've removed what I thought was unnecessary, tweaked values to more match Tailwind, and altered colors to use CSS variables.

Copy
1import * as React from 'react'
2import { ThemeProvider } from '../components'
3import { createGlobalStyle } from 'styled-components'
4
5const GlobalStyles = createGlobalStyle`
6  * {
7    box-sizing: border-box;
8    margin: 0;
9    padding: 0;
10  }
11  html {
12    font: 112.5%/1.5em georgia, serif, sans-serif;
13  }
14  body {
15    background-color: var(--background);
16    color: var(--text-body);
17    font-family: georgia, serif;
18    font-weight: normal;
19    word-wrap: break-word;
20    font-kerning: normal;
21  }
22  h1 {
23    color: var(--text-header);
24    font-size: 2.25rem;
25    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
26    Helvetica Neue, sans-serif;
27    font-weight: bold;
28    line-height: 1;
29    margin-top: 1.5rem;
30    &:first-child {
31      margin-top: 0;
32    }
33  }
34  h2 {
35    margin-top: 1.5rem;
36    color: var(--text-header);
37    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
38      Helvetica Neue, sans-serif;
39    font-weight: bold;
40    font-size: 1.5rem;
41    line-height: 1;
42    &:first-child {
43      margin-top: 0;
44    }
45  }
46  ul, ol {
47    margin-left: 1.5rem;
48    margin-top: 1.5rem;
49    list-style-position: outside;
50  }
51  ul {
52    list-style-type: disc;
53  }
54  p {
55    margin-top: 1.5rem;
56    color: var(--text-body);
57    &:first-child {
58      margin-top: 0;
59    }
60  }
61`
62
63export const App = ({ children }) => {
64  return (
65    <ThemeProvider>
66      <GlobalStyles />
67      {children}
68    </ThemeProvider>
69  )
70}
71
72export default App

Attributions

Photo by Oscar Obians (@prowhiz) on Unsplash