最佳实践

为了帮助你构建出高质量、高性能、且符合可访问性（Accessibility）规范的 Neo-Brutalism 应用，BrutxUI 提供了四个维度的详尽最佳实践指南。

请根据你的开发需求，选择阅读对应的详细章节：

---

📖 组件使用规范

介绍如何正确选择和组织基础组件与复合组件，主要包含：

• 组件选择指南：基础交互组件与复合表单/反馈场景的组件推荐。
• Props & 事件规范：变体与尺寸的使用方式，以及类型安全的双向绑定与事件监听。
• Slot & 组合模式：如何利用默认/具名插槽以及 asChild 模式优雅地扩展和定制组件。

🎨 样式定制指南

说明如何通过 CSS 变量和 Tailwind 进行个性化风格定制，主要包含：

• CSS 变量覆盖：在全局或特定容器局部覆盖 --brutal- 前缀变量控制边框、圆角及阴影。
• 主题与令牌：使用预设主题或创建自定义类主题，以及如何在运行时进行动态主题切换。
• Tailwind 扩展：结合 cn() 辅助函数实现条件与响应式样式的高效合并，以及组件级样式深度覆盖。

♿ 可访问性指南

介绍如何确保应用符合 WCAG 2.1 AA 可访问性合规标准，主要包含：

• ARIA 属性使用：合理使用语义化 HTML 标签，以及与 <Label> 的表单自动/手动关联。
• 键盘导航 & 焦点管理：组件内置的快捷键支持，以及在弹窗打开/关闭时的自定义焦点流动管理。
• 屏幕阅读器支持：提供替代文本与状态描述（aria-live, aria-busy），支持高对比度模式。

⚡ 性能优化建议

提供在大数据、高频交互场景下的性能监控与优化策略，主要包含：

• 构建优化与懒加载：实现首屏按需导入、打包 chunk 优化与组件/路由懒加载。
• 大数据渲染：使用 shallowRef 避免深层响应追踪，并结合虚拟滚动（VirtualScroll）与无限加载处理海量数据。
• 交互防抖节流：在输入搜索和高频点击场景中运用防抖与节流，减少多余的运行时开销。