Skip to content
Web Dev

CSS Setup

I split the shared CSS into separate files. Each file has one job, which makes it easier to maintain.

The CSS files are loaded in the following order:

  1. reset.css removes unwanted browser defaults.
  2. var.css defines the design tokens and color themes.
  3. global.css styles elements across the site.
  4. util.css contains reusable classes.
  5. markdown.css styles rendered Markdown content.

The order matters. The reset runs first. The remaining files can then use the variables from var.css. The optional Markdown styles can then build on the global element styles.

Component-specific styles stay with their components and load after these shared files.

If a project does not need to render Markdown you do not need the markdown.css file and import.

Astro Framework example

Section titled “Astro Framework example”

In an Astro layout, the imports could look like this:

---
import "../styles/reset.css";
import "../styles/var.css";
import "../styles/global.css";
import "../styles/util.css";
import "../styles/markdown.css";
---

See the /src/styles folder and BaseLayout.astro component of my Astro Starter Template for a live example.