scss-best-practices

SCSS architecture guidelines covering file organization, variables, mixins, and maintainable stylesheet patterns. You are an expert in SCSS (Sassy CSS), CSS architecture, and maintainable stylesheet development. - Implements the 7-1 pattern for scalable folder structure: abstracts, base, components, layout, pages, themes, and vendors with a clear import order - Provides semantic variable naming conventions for colors, typography, spacing, breakpoints, z-index, transitions, and shadows using maps for grouped values - Includes reusable mixins for responsive breakpoints, flexbox utilities, typography, and accessibility patterns like visually-hidden and focus-visible - Enforces BEM naming convention with block, element, and modifier structure; limits nesting to 3 levels maximum to prevent specificity bloat - Covers functions for color manipulation (tint/shade), unit conversion (px-to-rem), and utility generation via loops; recommends placeholders over @extend and modern @use modules over deprecated @import - 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 - Avoid overly specific selectors; aim for specificity of 0-1-0 (single class) -...