astro-scss-best-practices

What problem does it solve?

This guide enforces scalable, maintainable styling in Astro projects by mandating component-scoped SCSS modules, namespaced imports, and design-token usage, reducing CSS collisions and confusion.

Core Features & Use Cases

• Use SCSS Modules for all components and co-locate ComponentName.module.scss alongside each component.
• Enforce namespaced imports with @use to import tokens and mixins, preventing namespace pollution.
• Promote design tokens via CSS variables (var(--...)) for colors, spacing, and typography to ensure consistency.
• Encourage component isolation by extracting repeated patterns into reusable components and limiting global styles.

Quick Start

Apply these practices when creating or refactoring Astro components by replacing global styles with component-scoped SCSS modules and using namespaced tokens.