scss-style-guide

Enforce SCSS coding standards with BEM naming and file structure.

232|70|Updated May 16, 2019

Search Tags:#theming #accessibility #responsive design #coding standards #css variables #scss #bem

One-click install

npx skills add https://github.com/SAP/fundamental-styles --skill scss-style-guide

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: scss-style-guide
Source: https://github.com/SAP/fundamental-styles/tree/main/.claude/skills/scss-style-guide
Command: npx skills add https://github.com/SAP/fundamental-styles --skill scss-style-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures consistent SCSS coding standards for the fundamental-styles project, reducing errors and improving maintainability.

Core Features & Use Cases

SCSS Coding Standards: Enforces BEM naming conventions, file structure, and best practices.
Architecture & Methodology: Provides guidelines for BEM pattern usage and self-contained components.
File Structure & Imports: Standardizes file headers, imports, and variable declarations.
Reset Mixin Rules: Ensures proper usage of the fd-reset() mixin for consistent resets.
CSS Custom Properties: Offers best practices for using CSS variables for theming and customization.
Loops for Repetitive Properties: Demonstrates how to use loops for generating variations like colors and sizes.
Nesting Depth & Selectors: Defines maximum nesting levels and best practices for selectors.
Units & Values: Provides guidelines for using theming variables, rem units, and logical properties.
RTL-Aware Spacing and Borders: Ensures proper handling of right-to-left text direction.
State & Pseudo-Class Mixins: Offers mixins for interactive states like hover, focus, and disabled.
Responsive & Compact Modes: Provides responsive design guidelines and compact mode adjustments.
Common Mixins & Utilities: Lists common mixins for flexbox, positioning, text utilities, borders, sizing, and resets.
Pseudo-Elements for Visual Effects: Explains how to use pseudo-elements for extended touch areas, custom focus indicators, and badge positioning.
Code Organization Within File: Suggests an order for organizing code within a SCSS file.
Anti-Patterns to AVOID: Lists common coding anti-patterns to avoid.
Accessibility Patterns: Provides guidelines for implementing accessibility features.
Quick Checklist for Code Review: Offers a checklist for reviewing SCSS code.
Common Theming Variables Reference: Lists common theming variables used in the project.

Quick Start

Use the scss-style-guide skill to review your SCSS code and ensure it adheres to the fundamental-styles coding standards.

Frequently Asked Questions about scss-style-guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I enforce consistent SCSS coding standards for BEM naming and file structure?▼

You can enforce SCSS coding standards by applying BEM naming conventions, standardizing file structure and imports, and using reset mixins to ensure consistent, maintainable stylesheets across your project.

What SCSS anti-patterns should I avoid when using CSS variables and nesting?▼

Avoid excessive nesting depth, improper CSS variable usage, and hardcoded values instead of theming variables. Following established SCSS anti-patterns prevents maintainability issues and styling conflicts.

How do I handle RTL-aware spacing and borders in SCSS?▼

Handle RTL-aware spacing and borders by utilizing logical properties and specific mixins that ensure proper right-to-left text direction support, preventing layout issues in localized interfaces.

Can I use loops for repetitive properties like colors and sizes in SCSS?▼

Yes, you can use SCSS loops to generate repetitive property variations like colors and sizes. This approach ensures consistent styling patterns while reducing manual code duplication.

What's the best way to organize code within a SCSS file for accessibility patterns?▼

Organize SCSS files by following a suggested code order, placing accessibility patterns, state mixins, and pseudo-elements logically to ensure interactive states like hover and focus are clearly defined and maintainable.