scss-best-practices

SKILL.md

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