Choose Styling Paradigm

[alexfinnarn]

I've never looked into CSS resets that much, but in looking into Gatsby more, they mention Typography a lot.

https://kyleamathews.github.io/typography.js/ https://github.com/KyleAMathews/typography.js

I suppose Gatbsy docs mention Typography so much because Kyle also authored it.

I wanted this issue to just be about using a library like Typography, but I should really step back and choose a styling paradigm to follow. This topic also makes a great blog post.

https://www.gatsbyjs.org/tutorial/part-two/

[alexfinnarn]

Post Outline:

• Intro and how important it is to pick a paradigm at the beginning of building out your blog site.
• My experience is mainly with including regular CSS files and leaning on a CMS to aggregate the CSS and only display it on the pages needed.
• Gatsby mentions several ways of handling this, but there are only a few that make sense to me.
  • I'd advise against using global styles. You wouldn't do this in a larger project so why do it on your personal site.
  • People might complain about component style CSS and certain ways it can be "too React" but we're only using React here so who cares. If you work at a large organization with many dev teams that use all kinds of frameworks, then you might want to look at more general solutions that work across frameworks. I'm not going to check for that while making my decision here.
• CSS Modules
  • https://github.com/css-modules/css-modules
  • A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
  • ICSS - https://github.com/css-modules/icss - relates to BEM - mainly allows you to write regular CSS, import that somewhere else, use it like styles.title in code but have that be .title_1rt4_l in a CSS rule.
  • 12.9k stars on GH
  • uses Webpack css-loader as far as I can tell
  • need to use .module.css at the end of the filename to tell Gatsby to process the file as a CSS module.
• CSS-in-JS
  • I don't have much to add here...really
  • Emotion - https://github.com/emotion-js/emotion
  • used by 42k projects
  • Newer than styled-components
  • allows for composition via a CSS prop so no need for !important anymore
  • Styled Components - https://github.com/styled-components/styled-components
  • Used by 197k projects
  • Uses tagged template literals...not a fan of this
  • Using Emotion feels much more Reacty than color: ${props => props.inputColor and <Input inputColor="rebeccapurple" />
• PostCSS
  • I'm not sure where to put this one in
  • used by 3.1 million projects...holy crap!
  • can be used with CSS modules
  • tons of useful plugins that work by parsing the CSS files into AST

PostCSS with CSS modules looks to be the most fun and widely used solution, even if the Gatsby PostCSS module has fewer installs than Styled Components, Emotion, and Typography.

[alexfinnarn]

Follow https://www.gatsbyjs.org/packages/gatsby-plugin-postcss/ and install some plugins. A few in https://blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/ are good enough.

Gatsby already uses Autoprefixer so technically I'm using PostCSS in any Gatsby project. This makes it an easier choice if you care about not adding too many dependencies that you might not need. Adding SASS on top of what's already there feels like overkill to me.

[alexfinnarn]

The only mention of Autoprefixer comes from adding "browserslist" to package.json so I should probably add that in this feature as well as the blog post.

https://www.gatsbyjs.org/docs/browser-support/#specify-what-browsers-your-project-supports-using-browserslist

I can place this post in src/posts in my #5 blog article and process. I was going to add all of the current markdown files I have, but then I have to figure out what to do with assets. It will be easier and clearer to start from scratch with just one post.