SCSS/Sassy CSS best practices and coding guidelines for maintainable, scalable stylesheets
SCSS architecture guidelines covering file organization, variables, mixins, and maintainable stylesheet patterns. 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 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
don't have the plugin yet? install it then click "run inline in claude" again.