When to use "Custom CSS" vs. adding css directly to site code?

Topic summary

Seeks guidance on choosing between adding CSS directly to theme/site files versus using the theme’s “Custom CSS” box. The poster asks if there are specific scenarios where direct code edits are preferable.

Key concern: whether either approach offers advantages for browser or mobile compatibility.

No responses or consensus yet; the question remains open with no recommended practices or decisions provided.

Summarized with AI on December 10. AI used: gpt-5.

Are there scenarios where adding css directly to site code is preferred over using the “Custom CSS” box when editing your theme? I’m wondering is one is better for e.g. browser/mobile compatibility, etc.

2 Likes

Hey @bags.made.by.bears

Short answer: Both methods work exactly the same for browser/mobile compatibility. The CSS itself is what matters, not where you put it.

Here’s when to use each:

Use the “Custom CSS” box when:

  • Making small tweaks or overrides (changing colors, spacing, hiding elements)
  • Testing things out quickly
  • You’re not comfortable diving into code files
  • You want changes that survive theme updates

Add CSS directly to theme files when:

  • You’re making significant, structural changes
  • You need better organization (grouping related styles together)
  • You’re building custom sections or templates
  • You want to use CSS variables or complex selectors across multiple files
  • Performance matters - direct file CSS loads slightly faster and can be minified better

Real talk from experience:

The Custom CSS box can get messy FAST if you’re dumping hundreds of lines in there. I’ve seen stores with 1000+ lines of unorganized CSS in that box - it becomes a nightmare to maintain.

Cheers,
Moeed