SCSS Modules Patterns

Quick Guide: A *.module.scss file is a locally scoped stylesheet: its class names are rewritten at build time and reached through an imported object, so a component's styles cannot collide with anyone else's. Wrap library styles in @layer components {} so an application overrides them with an unlayered rule and no specificity contest. Load Sass with @use and @forward — @import is deprecated and going away. Style state with attribute selectors rather than a class per state, and keep anything that must change without a rebuild in a custom property rather than a Sass variable.

Detailed Resources:

• examples/core.md — local scoping and the styles object, cascade layer setup, layered component styles, unlayered application overrides
• examples/modules.md — @use, @forward, namespaces, with configuration, built-in modules, migrating off @import
• examples/patterns.md — module file structure, data-attribute state, mixins, global styles, icon sizing
• examples/tokens.md — reading design tokens from module styles, component-scoped custom properties
• examples/theming.md — keeping a module free of theme branching
• examples/advanced.md — :has(), :global(), nesting depth
• reference.md — anti-patterns with fixes, @use versus @import, Sass deprecation notes

<critical_requirements>

Before writing SCSS Modules code