skills.rest
taurgis
taurgisCOMMUNITY
Explore all skills by this author →
Website𝕏@theunenthGitHub

sfcc-sfra-scss

Organize SFRA SCSS styling with canonical directory structure and BEM naming.

27|9|Updated Aug 8, 2025
Search Tags:#theming#accessibility#css#responsive#tokens#scss#sfra
One-click install
npx skills add https://github.com/taurgis/sfcc-dev-mcp --skill sfcc-sfra-scss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sfcc-sfra-scss
Source: https://github.com/taurgis/sfcc-dev-mcp/tree/main/ai-instructions/skills/sfcc-sfra-scss
Command: npx skills add https://github.com/taurgis/sfcc-dev-mcp --skill sfcc-sfra-scss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Best practices for styling SFRA storefronts to ensure upgrade-safe, maintainable CSS across cartridges.

Core Features & Use Cases

  • Canonical SCSS directory structure and import order to align with SFRA base.
  • BEM naming conventions, token-based theming, and accessible styling.
  • Reusable patterns for responsive design, linting, and performance considerations.

Quick Start

Import the base SCSS, apply BEM-based overrides in your custom cartridge, and adjust tokens in abstracts/_variables.scss to begin theming.

Frequently Asked Questions about sfcc-sfra-scss

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

FAQPage Schema
What is the best way to organize SCSS styling in an SFCC SFRA cartridge?▼

SFRA SCSS styling best practices involve a canonical directory structure and import order that aligns with the SFRA base, ensuring upgrade-safe and maintainable themes across custom cartridges.

How do I create upgrade-safe style overrides in SFRA without breaking the base theme?▼

You create upgrade-safe style overrides by importing the base SCSS into your custom cartridge, applying BEM-based overrides, and adjusting design tokens in abstracts/_variables.scss to begin theming.

Does SFRA support token-based theming for responsive storefront layouts?▼

Yes, SFRA supports token-based theming for responsive layouts by utilizing SCSS variables and mixins, enabling centralized management of design tokens for consistent and maintainable storefront styling.

Why does BEM naming matter for SFCC CSS customizations across multiple cartridges?▼

BEM naming matters for SFCC CSS customizations because it provides a strict, structured naming convention that prevents style conflicts, ensuring maintainable and predictable overrides across multiple cartridges.

What are the limitations of customizing SFRA storefront styles without SCSS linting?▼

Without SCSS linting, SFRA storefront styles risk inconsistent formatting and naming collisions, which degrades performance and maintainability, making future SFCC platform upgrades significantly harder to manage.

Related Skills

Explore More Design & Creative Skills→
finsilabsfinsilabs
44

sfcc-cartridge-development

Build custom SFCC cartridges with SFRA controllers, ISML templates, and OCAPI/SCAPI integration.

Official
Advanced
tomtoto757tomtoto757
14

sfcc-cartridge-development

Scaffold SFCC cartridges with structured controllers, ISML templates, and hooks.

Community
Advanced
taurgistaurgis
27

sfcc-isml-development

Enforce Bootstrap 4 conventions and safe encoding in SFRA ISML templates.

Community
Advanced
taurgistaurgis
27

sfcc-ocapi-scapi-slas

Guide OCAPI versus SCAPI selection and SLAS token lifecycle management for SFCC integrations.

Community
Advanced