Refactoring CSS

One issue I noticed with the stylesheet organisation when updating the headers and footers was that some of the foundation modules were a mix of Sass variables and output CSS rules.

The structure of the Sass variables reflects an information format now commonly referred to as design tokens (usage on this site predates that concept being given a name by the then-nascent design systems community).

This approach worked well in the past and I’ve used variations of this same structure across numerous different websites and applications.

Sass has moved on considerably since then. Installing a more recent version of the command line tool revealed a swathe of breakages and scoping issues, largely as a result of the major shift towards encapsulated modules rather than global variables as the default organising principle. So I will need to change things around refactor to get it working.

This is an annoying chore, but a useful one. At the end of it, I’ll have ported the core of the site’s design system over to the new structure and colour system, ready for introducing all the redesigned page elements and layouts as individual modules.

@import "foundation/scale.scss";
@import "foundation/colors.scss";
@import "foundation/reset.scss";
@import "foundation/media.scss";
@import "foundation/typography.scss";
@import "foundation/content.scss";

This basic structure should remain in place mostly unchanged, but to use modern versions of Sass more effectively, the design tokens need to be set up so they can be imported by individual modules that need them, rather than set as globals available everywhere.

Design tokens remain in the foundation namespace folder and all the shared CSS resets and global page styling go into a new namespace folder default (could also be named core or base).

default/reset
default/body
default/content
default/modifiers
foundation/colors
foundation/media
foundation/scale
foundation/text