Astro & SCSS Modules Best Practices

Core Styling Rules

1. SCSS Modules Only

• Use SCSS Modules for all components — avoid Tailwind or inline style props.
• Co-locate ComponentName.module.scss with every component.
• Reference styles via styles.className.

2. Namespaced Imports (Crucial)

• ALWAYS use namespaced imports for SCSS helpers and tokens.
• NEVER use wildcard imports (as *).
• This prevents namespace pollution and CSS variable conflicts.