The original title is: "Shopify CSS explained: when to use {% stylesheet %}, {% style %}, and <style>"

Short summary

Explains the three Shopify CSS methods — {% stylesheet %}, {% style %}, and <style> — and when to use each for optimal theme performance. {% stylesheet %} bundles cached shared CSS, {% style %} generates per-section dynamic CSS with Liquid variables, and <style> is plain HTML for one-off cases. Recommends combining CSS variables with {% stylesheet %} for the best balance of caching and customization.

• •{% stylesheet %} bundles cached reusable CSS across the theme — fastest but no Liquid
• •{% style %} supports dynamic Liquid values but generates CSS per section instance
• •Combine CSS variables with {% stylesheet %} for cached yet customizable styles

Generated with AI, which can make mistakes.