liquid-theme-standards

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. - 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 - Hyphens separate words: .product-card , not .productCard - Single element level only: .block__element , never .block__el1__el2 - Modifier always paired with base class:...