liquid-theme-standards
Installation
Summary
CSS, JavaScript, and HTML standards for building Shopify Liquid themes with progressive enhancement and design tokens.
- BEM naming convention with single-level element nesting, CSS custom properties for all design values, and logical properties for RTL support
- Web Components pattern for component-scoped JavaScript using native browser APIs only; no external dependencies
- Progressive enhancement: semantic HTML first, then CSS, then optional JavaScript enhancements
- Defensive CSS practices including overflow handling, aspect ratio preservation, and reduced-motion support
- Use
jqfor safe JSON edits in template and config files rather than string-based find-and-replace
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 |
Related skills
More from benjaminsehl/liquid-skills
shopify-liquid-themes
Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS/JS patterns. Use when creating or editing .liquid files for Shopify themes, working with schema, doc, stylesheet, javascript tags, or Shopify Liquid objects/filters/tags.
2.2Kliquid-theme-a11y
Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components including product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files.
1.6K