如何在项目中按需启用 Pico.css 样式（避免全局污染）

pico.css 自 v2 起提供「条件式」引入模式（pico.Conditional.min.css），仅对添加 `class=”pico”` 的元素生效，彻底解决与其他 ui 库的样式冲突问题。

Pico.css 以轻量、语义化和开箱即用著称，但其默认版本会全局重置表单控件、按钮、链接等基础元素样式，容易与 bootstrap、Tailwind、自定义组件库或框架内建样式发生冲突。为兼顾 Pico 的设计一致性与项目可控性，v2 引入了 Conditional Mode（条件式模式） —— 这正是你所需的安全集成方案。

✅ 正确引入方式

替换原有 标签，使用官方提供的条件式 CSS 文件：

⚠️ 注意：必须使用 pico.conditional.min.css（非 pico.min.css），且确保版本 ≥ 2.0.0。

? 使用规则：显式启用，按需生效

条件式模式下，Pico.css 完全放弃全局样式注入，所有样式规则均以 .pico 为祖先选择器前缀。这意味着：

• 普通元素（如 、、
  
  ）保持浏览器默认样式或现有 CSS 状态；

• 仅当元素（或其任意父级）拥有 class=”pico” 时，内部子元素才被 Pico 样式接管；
• 支持嵌套作用域：.pico section > p、.pico .form-group input 等均有效。

? 实际示例

以下 html 展示「混合渲染」效果：

立即学习“前端免费学习笔记（深入）”；

                      
     
Plain HTML Section
     Native Button        
       
     
Pico-Styled Section
     Beautiful Pico Button          
       
Toggle with Pico design
       
This entire subtree inherits Pico's spacing, typography and interactivity.
     
   
  

? 补充说明

• 条件式模式不改变 Pico 的组件语法：仍可使用
  
  ,

  , 等语义化标签，只要它们位于 .pico 作用域内即可获得完整样式支持；
• 若需在多个不相邻区域启用，可为每个容器单独添加 class=”pico”；
• 不建议混用 pico.min.css 与 pico.conditional.min.css，会导致样式优先级混乱；
• 如使用构建工具（vite/vue/react），可通过 CSS 模块或 @import 方式引入，原理一致。

通过条件式模式，你既能享受 Pico.css 精心打磨的设计系统，又能完全掌控样式作用域——真正实现「按需加载、零侵入、高兼容」。