picnic css通过语义化html标签（如button、nav、select）和属性（如open、role="button"）自动应用样式与交互，不依赖自定义类名；需严格遵循结构规范（如label包裹input）、合理使用css变量定制，并注意与tailwind/bootstrap混用时的冲突。
Picnic CSS怎么做到不写类名就能样式化元素
Picnic CSS不是“完全不用类名”，而是把类名绑定到语义化HTML标签和属性上，靠选择器层级和属性匹配自动生效。它本质是预设了一套button、nav、dialog等原生标签的默认样式，并在特定结构（比如nav里嵌a）中注入交互行为。
常见错误现象：直接拿div当按钮用，写<div>Click</div>，结果没样式、没hover、没focus状态——因为Picnic根本不监听div。
- 必须用语义化标签：按钮用
button或带role="button"的a，导航用nav+a，表单控件用input[type]等 - 部分组件依赖属性：比如
dialog要加open属性才显示，select下拉菜单的箭头样式只对select原生标签生效 - 它不劫持全局
body或重置所有标签，所以和其它CSS库共存时冲突较小，但也不覆盖ul、table等“非交互”标签的默认样式
为什么input[type="checkbox"]样式看起来没变
Picnic确实重写了复选框和单选框的视觉表现，但前提是它们被包裹在label里，且input放在label内部或通过for属性关联。否则，input本身仍被浏览器隐藏，而Picnic的伪元素（::before）样式无法挂载。
- 正确写法：
<label><input type="checkbox"> Agree</label> - 错误写法：
<input type="checkbox"><label>Agree</label>（样式丢失，且点击label不触发勾选） - 如果用了JS动态插入
input，得确保DOM插入后标签结构完整，Picnic不监听DOM变动，不会重新绑定 - 移动端Safari对
label > input的点击热区支持更稳，单独用for在某些版本里可能失焦
如何给Picnic组件加自定义颜色或尺寸
Picnic本身不提供class="btn-primary"这类修饰类，定制得靠CSS变量或覆盖选择器。它的主题色、圆角、间距都由一组CSS变量控制，比如--primary、--radius，改了就全局生效。
立即学习“前端免费学习笔记（深入）”；
- 推荐方式：在
:root里重定义变量，例如:root { --primary: #2563eb; --radius: 6px; } - 不建议直接覆盖
button的background，因为Picnic用多个状态（:hover、:active、[disabled]）组合样式，单改一项容易断裂 - 想局部调整？可以加一个父容器类，比如
<section class="my-form">...</section>，然后写.my-form button { --primary: #dc2626; } - 注意变量作用域：Picnic的变量定义在
picnic.min.css里，你的自定义CSS必须在它之后加载，否则会被覆盖
和Tailwind、Bootstrap混用时要注意什么
混用本身可行，但Picnic的“无类名”逻辑会和Utility-First类库产生隐性冲突。最常踩的坑是：Tailwind的text-center和Picnic的nav内联居中逻辑打架，或者Bootstrap的form-control强行重置input边框，盖掉Picnic的圆角和阴影。
- 优先让Picnic管交互组件（
button、dialog、nav），让Tailwind管布局和文字（max-w-md、text-lg） - 避免在同一元素上叠加：比如
<button class="bg-blue-500 px-4"></button>——Picnic的button已有padding和背景，Tailwind的bg-会覆盖其--primary变量，导致悬停色失效 - 如果必须用Utility类，建议用
!important或更高权重选择器（如body .my-btn）来确保覆盖，但这是权宜之计 - Picnic的
dialog和Bootstrap的modal都用position: fixed，同时引入会导致z-index混乱，必须手动统一
它不抽象成配置项，也不生成运行时CSS，所有规则都在静态文件里。你改一个变量，就得测试所有用到那个变量的组件——比如调亮--primary，button、progress、meter全跟着变，这点容易被忽略。
