同时使用UIKit与Bootstrap是否存在CSS及JS层面的已知冲突？

二者的冲突主要集中在CSS样式与JS脚本两个维度，具体已知问题和对应解决方案如下：

CSS层面冲突 #

• 通用类名覆盖：如果使用未做命名空间处理的自定义构建包，二者的通用语义类名（如.container、.btn、.row、.modal）会出现加载顺序靠后的样式覆盖靠前的样式的问题，导致组件样式、布局错乱。默认最新版UIKit所有类自带uk-专属前缀，原生类名和Bootstrap冲突概率极低，这类问题大多出现在自定义修改过的框架包中。
• 全局基础样式冲突：两款框架都自带全局标签重置规则，对body、段落、列表、表单元素的默认边距、行高、字体属性定义存在差异，会互相覆盖导致基础排版不符合预期。
• 响应式规则冲突：二者默认的响应式断点阈值、栅格计算逻辑不一致，同时混用两套栅格系统时，不同屏幕尺寸下的布局切换会出现逻辑混乱。

JS脚本层面冲突 #

• 交互事件冲突：二者对下拉菜单、模态框、折叠面板这类通用组件的全局事件监听逻辑存在重叠，可能出现点击无响应、事件重复触发、组件无法正常关闭的问题。
• 全局变量/方法冲突：依赖jQuery的旧版本框架会扩展挂载同名的jQuery方法，比如部分旧版本同时存在$.modal方法，后加载的会覆盖先加载的定义，导致对应组件调用失效。
• 动画逻辑冲突：二者自带的DOM动画（淡入淡出、滑动、过渡）实现逻辑不同，同时作用于同一个DOM元素时会出现动画卡顿、样式闪烁、执行顺序异常的问题。

共存优化方案 #

• 优先选择单一框架实现全部需求，无必要不要同时引入两款框架，可规避绝大多数潜在问题。
• 对其中一款框架做命名空间定制，比如给Bootstrap所有类添加bs-前缀，从根源避免类名冲突。
• 隔离组件作用域：两款框架的组件分别放在带专属类名的父容器下，通过CSS优先级限制样式作用范围，避免跨框架影响。
• 不要同时使用两款框架的同类型交互组件，比如模态框、下拉菜单只选其中一款的实现，避免JS逻辑冲突。

内容的提问来源于stack exchange，提问作者Pimpfru