Redesigning My Website Part 2

Since I got the basic layout and structure sorted for the site, I've been looking around for more indepth structures, layouts, different ways of styling, and just generally becoming more knowledgeable about web development and learning best practices.

I seem to have a tendency to not necessarily get bored quickly, but I get excited about something new and enjoy going off on a tangent learning something else which is more like a bolt on to what I was originally learning. In this latest sort of tangent I went down a rabbit hole of ways to style your webpage when using Gatsby. While watching some of Jason Jengstorf's videos and he mentioned CSS modules and Emotion a fair amount, I am already using Sass and of course, there's always standard CSS. There's a tonne more options out there, especially with CSS in JS, there's so many different variations of options to choose from!

As I mentioned above I'm already using Sass, and I have things set up similar to this video from Jessie Showalter. My thinking with the direction I want to go in is as follows:

  • I want to define colours and fonts (the theme) in one file
  • I want to pull in the colours and fonts to individual components styling
  • Structure/layout/sizing (anything other than color and font) should be contained in individual components
  • Responsive layouts and styling variables should be defined in a single file
  • Component level responsiveness should be contained in individual components

Taking these sort of requirements into consideration, the direction I am going to initially try is Emotion. My thoughts behind this are I want to use styled components, and while I could just use Styled Components, Emotion will bring in some other things I want t try out!