liquid-theme-standards
Installation
SKILL.md
CSS, JS & HTML Standards for Shopify Liquid Themes
Core Principles
- Progressive enhancement — semantic HTML first, CSS second, JS third
- No external dependencies — native browser APIs only for JavaScript
- Design tokens — never hardcode colors, spacing, or fonts
- BEM naming — consistent class naming throughout
- Defensive CSS — handle edge cases gracefully
CSS in Liquid Themes
Where CSS Lives
| Location | Liquid? | Use For |
|---|---|---|
{% stylesheet %} |
No | Component-scoped styles (one per file) |
{% style %} |
Yes | Dynamic values needing Liquid (e.g., color settings) |
assets/*.css |
No | Shared/global styles |