Shopify CSS Guidelines

CSS naming conventions, nesting rules, and encapsulation practices for Shopify theme development.

When to Use

• Writing CSS for Shopify theme sections
• Naming CSS classes
• Deciding when to use CSS nesting
• Encapsulating section styles

CSS Naming - BEM Methodology

Use BEM (Block Element Modifier) methodology for structure inside a section:

.block {}
.block__element {}
.block__element--modifier {}