bootstrap 的 class 命名并非更“不语义”，而是强调复用性与容错率的设计哲学差异；semantic ui 虽语义更强但顺序敏感、体积更大、定制更复杂、响应式易出错且性能开销更高。
Bootstrap 的 class 命名是否真的比 Semantic UI 更“不语义”？
不是命名风格问题，是设计哲学差异。Bootstrap 的 btn btn-primary 看似“非语义”，实则是为快速复用而做的抽象——它描述的是“一个主操作按钮”，而非“提交表单的按钮”。Semantic UI 的 ui primary button 听起来更贴近自然语言，但实际项目中，你很快会发现它强制你写更多 class 来表达状态（比如 ui disabled primary button），反而让 HTML 更冗长。
常见错误现象：class="ui button primary" 顺序错乱导致样式失效；Semantic UI 要求严格顺序，而 Bootstrap 对 btn btn-lg btn-success 的顺序基本不敏感。
- 使用场景：原型阶段或需要高频迭代的后台系统，Bootstrap 的 class 组合容错率更高
- 参数差异：Bootstrap 用
btn-outline-primary控制描边按钮，Semantic UI 需额外加outline类且依赖主题配置 - 性能影响：两者都支持按需引入 CSS，但 Semantic UI 的 CSS 文件默认体积略大（+12% 左右），尤其开启所有模块时
如何在 React 项目里避免 Semantic UI 的 Dropdown 渲染卡顿？
Semantic UI 的 Dropdown 默认启用搜索 + 过滤 + 动画 + 键盘导航，React 中直接套用容易触发频繁重绘。Bootstrap 的 Dropdown 则轻量得多，原生不带搜索逻辑，靠 data-bs-toggle="dropdown" 控制显隐，无 JS 运行时开销。
常见错误现象：Dropdown 展开后滚动页面卡顿、输入搜索关键词时输入框延迟明显、React DevTools 显示大量 useEffect 触发。
- 实操建议：禁用 Semantic UI
search和filter，改用受控模式 + 手动节流搜索逻辑 - 替换方案：对简单下拉菜单，直接用 Bootstrap 的
Dropdown+useState控制显隐，不引入任何额外 hook - 兼容性注意：Semantic UI 的
Dropdown在 Safari 下偶现定位偏移，需手动加position: absolute !important修正，Bootstrap 基本无此问题
为什么 Grid 布局在 Semantic UI 里更容易写出响应式 bug？
Semantic UI 的 Grid 是基于 flex 的封装，但它的断点类名（如 tablet four wide column）和 Bootstrap 的 col-md-4 相比，语义虽强，却隐藏了列宽计算逻辑。当你嵌套多层 Grid，又混用 stackable 和 divided，很容易在小屏下出现列宽溢出或塌陷。
常见错误现象：桌面端正常，移动端列宽总和超 100%，内容横向滚动；或 computer only 类被误用于隐藏元素，结果在 iPad 上也消失（因 iPad 被识别为 computer）。
- 实操建议：Semantic UI 中慎用
stackable，优先用明确断点类（如mobile only）替代 - 参数差异：Bootstrap 的
col-6 col-md-4 col-xl-3是确定性宽度，Semantic UI 的four wide mobile four wide tablet实际是相对比例，需配合row总列数理解 - 调试技巧：打开浏览器控制台，检查元素 computed width，Semantic UI 的 flex-basis 常显示为
auto，此时需手动加width覆盖
自定义主题时，_variables.scss 修改哪个更省事？
Bootstrap 的主题定制路径清晰：改 $primary、$font-size-base 等变量，重编译即可全局生效。Semantic UI 用 site.variables 和 theme.config 双文件控制，且部分组件样式还分散在 elements/ 子目录里，改一个颜色常要查三处。
常见错误现象：修改 @primaryColor 后，Button 变色了，但 Progress 还是旧色；或重编译后图标字体路径报 404（因 themes/default/assets/fonts 未同步更新）。
- 实操建议：Bootstrap 直接覆盖变量后运行
sass --watch；Semantic UI 必须用gulp build，且首次构建前要确保semantic.json中base路径正确 - 性能影响：Semantic UI 主题构建耗时明显更长（平均 8–12 秒），Bootstrap Sass 编译通常在 2 秒内
- 容易忽略：Semantic UI 的
site.variables不支持 CSS 自定义属性（CSS vars），所有主题色必须硬编码，无法 runtime 切换
真正难的不是选框架，是搞清你要定制的是视觉风格，还是交互契约——前者 Bootstrap 更稳，后者 Semantic UI 的约定反而容易反噬。
