Scss Best Practices

This is a comprehensive SCSS style guide that covers the 7-1 architecture pattern, BEM naming conventions, and a well-organized collection of mixins for responsive design, flexbox layouts, and accessibility features. You get detailed variable naming conventions with semantic scales for spacing, typography, and z-index management, plus practical examples of acceptable nesting depth and when to break rules. The breakpoint mixin system and utility functions like tint/shade are immediately useful. If you're setting up a new project or trying to bring consistency to an existing codebase, this gives you a complete blueprint rather than forcing you to piece together conventions from scattered blog posts. The focus on maintainability over cleverness is the right approach for team environments.

skills.sh installs: 1.7K
GitHub stars: 302
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mindrally/skills --skill scss-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

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