The Overcomplexity of the Shadcn Radio Button
4 months ago
- #UI frameworks
- #simplicity
- #web development
- 作者接到任务，需要更新网页应用中单选按钮的视觉设计。
- 发现该应用使用了Shadcn——一个通过将预制组件复制到代码库中的UI框架。
- Shadcn的单选按钮实现包含两个React组件，需从Radix和第三方图标库导入，共计45行代码。
- Radix是另一个提供无样式组件的UI框架，Shadcn在此基础上添加样式。
- Radix的实现使用ARIA属性模拟单选按钮行为，而非原生HTML元素，这违背了ARIA第一准则。
- 作者质疑这种复杂性，指出用CSS直接样式化单选按钮非常简单，无需JavaScript或额外依赖。
- 作者提供了一个无需任何框架或库的纯CSS单选按钮样式示例。
- 虽然承认组件库的便利性，但作者主张在可能的情况下保持简洁并使用原生浏览器元素。
- 为简单单选按钮引入多重库的复杂性会带来不必要的认知负担、潜在错误，并影响网站性能。
- 作者怀旧地回顾了原生HTML单选按钮的简洁性。