CSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme asset files.
This skill provides comprehensive coding standards for CSS, JavaScript, and HTML within Shopify Liquid themes. It addresses the common challenges developers face when writing frontend code in .liquid files, particularly around the limitations of Liquid template processing within stylesheet tags, maintaining consistent naming conventions, and building maintainable theme code without external dependencies. The skill ensures developers understand where Liquid can and cannot be used, preventing common mistakes that lead to broken styles or non-functional dynamic values.
The skill covers five core areas: BEM (Block Element Modifier) naming conventions for consistent CSS class structures, design token systems using CSS custom properties to avoid hardcoded values, proper usage of stylesheet and style tags in Liquid, defensive CSS practices for handling edge cases, and progressive enhancement principles that prioritize semantic HTML. It includes specific guidance on CSS nesting depth, specificity targets, and the strategic use of Web Components for theme functionality. The standards emphasize native browser APIs over external JavaScript libraries, ensuring themes remain lightweight and performant.
This skill is essential for Shopify theme developers, frontend engineers working on e-commerce platforms, and teams maintaining or building custom Shopify storefronts. It's particularly valuable when writing component-level styles in section files, creating reusable UI patterns across themes, or refactoring legacy theme code to modern standards. The guidelines help teams establish consistent code quality, reduce technical debt, and build themes that are easier to maintain and scale over time.
No. The {% stylesheet %} tag does not process Liquid syntax. For dynamic values that need Liquid variables (like colors from theme settings), use inline style attributes with CSS custom properties or use the {% style %} tag instead.
Aim for 0 1 0 (single class selector) wherever possible, with a maximum of 0 4 0 for complex parent-child relationships. Never use ID selectors or !important declarations. Avoid element selectors in favor of classes for better maintainability.
Create a new BEM block when a component could function as a standalone entity or be reused elsewhere. Use element naming (.block__element) for parts that are tightly coupled to their parent and wouldn't make sense independently. Keep nesting to a single element level only.
No. These standards require using native browser APIs only, without external dependencies. This keeps themes lightweight, improves performance, and reduces maintenance overhead from third-party library updates.
Always use CSS custom properties (design tokens) for spacing, colors, typography, and other design values. Never hardcode these values directly in your CSS. Define a consistent scale in :root and reference these variables throughout your stylesheets. For dynamic values from Shopify settings, pass them as inline CSS custom properties on HTML elements.
Quick Setup:
.claude/skills/Repository
benjaminsehl/liquid-skills