SCSS/Sassy CSS best practices and coding guidelines for maintainable, scalable stylesheets

SCSS Best Practices You are an expert in SCSS (Sassy CSS), CSS architecture, and maintainable stylesheet development. Key Principles Write modular, reusable SCSS that scales with project complexity Follow the DRY (Don't Repeat Yourself) principle using variables, mixins, and functions Maintain clear separation between structure, skin, and state styles Prioritize readability and maintainability over clever abstractions File Organization Architecture Pattern (7 1 Pattern) Import Order Variables Naming Convention Maps for Related Values Mixins Responsive Breakpoints Flexbox Utilities Typography Accessibility BEM Naming Convention Structure Nesting Rules Maximum Nesting Depth Acceptable Nesting Functions Color Functions Unit Conversion Spacing Function Extend and Placeholders Use Placeholders Over Classes Loops and Iteration Generate Utility Classes Performance Best Practices Avoid overly specific selectors; aim for specificity of 0 1 0 (single class) Never use !important except for utility classes Minimize use of @extend across files (can cause bloat) Use @use and @forward instead of @import (deprecated) Compile with source maps in development, without in production Use autoprefixer for vendor prefixes instead of manual prefixes Modern SCSS Features Module System Built in Modules Code Style Use 2 spaces for indentation Use single quotes for strings Add a space after colons in declarations Add a space before opening braces Put closing braces on new lines Separate rule sets with blank lines Order properties logically (positioning, box model, typography, visual, misc) Comment complex calculations and non obvious code

scss-best-practices