In this template we're using styled-components to add css styles to the site.
Styled-Components is a CSS-in-JS library. This means that we write our css styles inside our javascript files, colocated with the rest of our component code.
This keeps all things that change the structure and appearance of our page in one place, but still let's us seperate things using normal Javascript concepts, like string, objects, exports and imports.
styled-jsx is bundled together with Next and lets you write CSS for your components by including them in a child component.
Ultimately this is personal preference, and feel free to experiment with styled-jsx, or any other CSS solution, but I feel that it leads to a more crowded component tree that's "noiser" when glancing over. Styled-Components directly creates components which is a cleaner seperation.
To use styled components and with Next we have to modify the _document.js
file. This is so that Next knows how to generate styles on the server and send
them
If you disagree with any of the position here or have some more thoughts, open up an issue and let's discuss!