全局 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 组件实际上就没有关联,处理起来也就不会过于纠结了。

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

Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 0 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

近期评论

鲍小螺: 前辈多多指教!ahu: 后生可畏寻梦xunm: 真不错,板子很好看。timochan: 太惨了( ,更新暴毙,如果恢复没成功,数据也 dump 不出来鲍小螺: 在这部分对话中,广树和保罗继续讨论生活的不同方面。保罗提到了技术更新和国内的优秀 IT 技术。广树解释了在国内积累的经验如何在日本产生穿越的感觉,并表达了对于日本生活节奏的喜爱。他还提到了医疗水平的差异和对于生活方式的感受。保罗表示,通过动漫和现实的对比,艺术来源于现实,日本生活的确有着独特之处。他们讨论了国内的生活节奏和就医等方面的压力,以及个人选择的自由。最后,他们也谈到了不结婚不买房的选择和对于房价的困扰。鲍小螺: 该对话进一步讨论了房地产和税收的问题。保罗提到了国内的房地产税和增值税以及日本的固定资产税。广树解释了日本房地产税的收取方式,以及房产税对于国内房产的影响。他认为,与国内相比,日本的房子质量和服务更好。保罗提出疑问,为什么自己拥有的地也要交税。广树解释了类似增值税的原理,并指出在日本拥有房产是稳定安全的。最后,保罗表示从广树的角度来看,情况确实是如此。鲍小螺: 这篇文章的聊天记录也尝试过用 GPT 总结,结果并不是太好,不知道是不是 Prompt 的问题,实际出来的内容过于简练了,于是又耗费了半小时写完,呼~
奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君