liquid-theme-standards

CSS, JavaScript, and HTML standards for building Shopify Liquid themes with progressive enhancement and design tokens. Critical: {% stylesheet %} does NOT process Liquid. Use inline style attributes for dynamic values: Rules: Use CSS custom properties for all values — never hardcode colors, spacing, or fonts. Define a consistent scale and reference it everywhere. Example scale (adapt to your theme's needs): Key principles: Global — in :root for theme-wide values Component-scoped — on component root, namespaced: Override via inline style for section/block settings: Parent → Child: Call public methods Child → Parent: Dispatch custom events Theme templates ( templates/*.json ), section groups ( sections/*.json ), and config files ( config/settings_data.json ) are all JSON. Use jq via the bash tool to make surgical edits — it's safer and more reliable than string-based find-and-replace for structured data. Prefer jq over edit for any .json file modification — it validates structure, handles escaping, and avoids whitespace/formatting issues. - 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...