Shopify中CSS样式冲突的根源在于link顺序错误和缺乏作用域隔离，必须将重置类、第三方框架CSS置于theme.liquid的<head>最前，自定义CSS放最后，并通过[data-theme]属性前缀实现轻量级作用域隔离。
直接在Shopify主题里引入CSS文件，link标签顺序不对或没做作用域隔离，样式大概率会被覆盖或反向污染——尤其当你同时用Tailwind、Bootstrap或第三方App的CSS时。
确保加载顺序符合层叠逻辑
Shopify主题的theme.liquid中，<head>里的link必须严格分层：
- 重置类（如
normalize.css）放在最前 - 第三方框架（
tailwind.css、bootstrap.min.css、App注入的widget.css）紧随其后 - 你自己的
theme.css或custom.css必须放在所有第三方之后
浏览器只认HTML中link出现的物理顺序，不是文件名或import位置。Vite/Webpack那套“JS里import顺序=CSS顺序”在Shopify里完全不生效——它压根不走构建流程，纯靠asset_url硬插。
避免全局类名直接碰撞
Shopify不支持css-modules或<style scoped>，但可以用轻量级兜底方案：
立即学习“前端免费学习笔记（深入）”；
- 给根容器加唯一属性，比如
<div id="shopify-section-{{ section.id }}" data-theme="myshop"></div> - 所有自定义样式前置该属性：
[data-theme="myshop"] .header-nav { ... }、[data-theme="myshop"] .product-card__title { ... } - 禁用通配符选择器（如
div .btn），改用明确上下文：[data-theme="myshop"] .btn
这种写法比堆!important或盲目加ID更可控，且不影响Shopify Section Editor的实时预览。
@layer在Shopify中基本不可用
Chrome 102+ 和 Safari 17.4+ 支持@layer，但Shopify主题目前不支持：
-
@layer声明必须位于CSS文件最顶部，而Shopify通过{{ 'theme.css' | asset_url | stylesheet_tag }}注入，无法保证@layer reset, base;这类语句不被前面的注释或变量干扰 - PostCSS插件（如
postcss-cascade-layers）在Shopify Online Store 2.0环境里无法启用 - 第三方App注入的CSS默认落在未命名顶层，你的
@layer custom根本压不住它
别在Shopify里试@layer——DevTools里连层名都看不到，只会浪费调试时间。
隐藏滚动条这类小需求，别动全局CSS
像隐藏滚动条这种只影响局部容器的操作，直接写在Section的<style>块里，而不是塞进theme.css：
<style>
.hero-banner::-webkit-scrollbar { width: 0; }
.hero-banner {
scrollbar-width: none;
}
</style>
这样既避免污染其他区域，又绕开了theme.css里可能存在的同名规则冲突。记住：Shopify里越局部的样式，越不容易被第三方脚本或App样式意外覆盖。
