theme-shopify-css-guidelines

Provides CSSB-style theming for the new featured collection section.

2|1|Updated Feb 9, 2026

Search Tags:#theming #web development #css #guidelines #shopify #bem

Ready to run

npx skills add https://github.com/Niccos-Shopify-Workspace/shopify-cursor-skills --skill theme-shopify-css-guidelines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: theme-shopify-css-guidelines
Source: https://github.com/Niccos-Shopify-Workspace/shopify-cursor-skills/tree/main/skills/theme-shopify-css-guidelines
Command: npx skills add https://github.com/Niccos-Shopify-Workspace/shopify-cursor-skills --skill theme-shopify-css-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides clear guidelines and best practices for writing CSS within Shopify themes, ensuring maintainability, scalability, and consistency across different sections and components.

Core Features & Use Cases

CSS Naming Conventions: Enforces BEM methodology for semantic and predictable class naming.
Scope and Encapsulation: Guides on how to prevent style conflicts between different theme sections.
Nesting Rules: Defines acceptable use cases and limits for CSS nesting to maintain readability.
Use Case: When developing a new product card section for a Shopify theme, use this Skill to ensure all CSS classes follow BEM, styles are scoped to the section, and nesting is used minimally for clarity.

Quick Start

Apply BEM naming conventions and scoped styles when writing CSS for the new featured collection section.

Frequently Asked Questions about theme-shopify-css-guidelines

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

FAQPage Schema

What CSS naming conventions should I use for Shopify theme development?▼

For Shopify theme development, CSS naming conventions should follow the BEM methodology to ensure semantic, predictable class naming and maintainable, scalable architecture across theme sections.

How do I prevent CSS style conflicts between different Shopify theme sections?▼

To prevent CSS style conflicts between Shopify theme sections, enforce strict scope and encapsulation rules that isolate styles to their specific sections, ensuring consistent rendering across the theme.

What are the nesting rules for CSS in Shopify themes?▼

CSS nesting rules in Shopify themes define acceptable use cases and limits for nesting selectors to maintain readability, advising minimal nesting for clarity when styling components like product cards.

Does Shopify theming require BEM for writing section CSS?▼

Shopify theming enforces BEM for writing section CSS to establish a maintainable and scalable architecture, ensuring that class naming remains semantic and predictable across all theme components.

What is the best way to structure CSS for a new Shopify theme section?▼

The best way to structure CSS for a new Shopify theme section is to apply BEM naming conventions alongside scoped styles, ensuring all classes are encapsulated to prevent conflicts and maintain scalability.