全局 CSS 真的坑死了

2022-07-19

今天的工作任务,也依旧是处理 UI 反馈的问题为主。期间还涉及到一处翻译增加,我向其他同事得知翻译是接入一个平台的,修改翻译表之后会自动同步到平台里面,修改翻译内容后会自动完成提交到 Git 上。在得知确切翻译内容之前,不允许将带有该翻译的内容上线,所以我给涉及组件弄了个 Stash 本地存盘了。

最蛋疼的还是这个项目全局 CSS 样式冲突的问题,特别折磨人。A 组件的定义,B 组件却在使用(虽说独立了样式引入,但优先级被 A 的抢走了)还不知道会不会有个 C 组件呢。你说我该把 A 和 B 独立出来改成局部样式,还是先把 A 的效果改好,然后再处理 B 可能出现问题的样式呢?

其中一个任务需要修改弹窗的顶部间距,发现这个样式应用了一条全局规则,涉及到几乎所有组件的样式,但这个 CSS 选择器又绑定了一个全局类名,我该一刀切直接删掉吗?

还有一种情况就是 A 和 B 组件共享相同 DOM 结构(因为被封装成了组件,可能移动端版本也在使用),如果我要解决全局冲突给它改成局部样式,那手机上的效果是否也会受到影响呢?

第一个问题我还是去查了下该全局类名的依赖,如果只涉及一个组件,且移动端未使用,我就直接改成 CSS Modules 的方式重写组件。如果有多处组件分散使用,则暂时保留原来的写法(不过 B 的样式可能会被修改的 A 样式影响,A 的优先级更高了),后期可能还是两者全部重构成 CSS Modules 才会互不干扰。

第二个问题我就这样照做了,砍掉了全局的选择器,重新写了一个“半全局”的通用 CSS Modules 给了多个弹窗组件使用,但现在感觉这种情况貌似看起来直接封装一个通用弹窗组件会更合适(也不知道项目里面有多少个这样的全局弹窗组件了)。

总而言之,全局 CSS 在团队协助的前端项目里面特别坑,宁愿使用多个 CSS Modules 引入到一个组件里面去调整,甚至是以“重复样式定义”的方式去复制其他组件的样式来创建新组件,也会避免产生很多问题。至少 A 和 B 组件实际上就没有关联,处理起来也就不会过于纠结了。

晚上也在给游戏“打工”了,原神海岛的这次活动岛屿数量多不说,大多数是解谜和剧情,没法迅速打打杀杀掠过。每个海岛甚至还可以切换“形态”,这大幅度的拉升了收集宝箱和奖励所需要的时间。所以我的进度依旧比不过群里其他人,还是按照自己的方式慢慢攻略吧~

郁闷
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君