Stylesheet Structure

I’ve used css modules in the past, and have generally liked the safety that provides, but this is an Astro site, and modules cannot be used in mdx components. The transformed class names won’t match the class name (.class-ASV893Z wont match .class). Accordingly, the sass must be compiled to actual class, not modules.

Layers

@layer reset, base, components, utilities, overrides;

Components, Layouts etc

I prefer keeping the styles with the component, layout. names are kebab case versions. The non modules files can be forwarded from the index file in the appropriate styles/folder/

styles/components/index.scss

@forward "@/components/my-component"

These are then imported in base.scss, into the root index.scss for compiled non-module styles.

Modules

Modules can still be used, if no mdx use case exists. Otherwise, output the classes.