theme-shopify-css-guidelines

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.