position:relative 是个好东西

现在所在的这家公司没有人专门做前端,目前只有PHP开发和一个产品经理一个美工,公司的前台页面工作外包出去了。此为背景。

外包出去的做好的页面发回给我,然后进行页面嵌套,我感觉这样不是很方便,有些细节往往需要再次进行调整,而写好的页面,根本就不敢乱动其 DOM 结构,因为一旦加一个 div ,减一个 span 都经常导致样式出现问题,外包回来的的页面很多 css 样式都与结构层次有关,导致我后面进行改的时候比较困难,所以我尽量不去动原先的结构,而添加 style 标签加入特定样式。当当当挡~ 主角出场,因为经常涉及的元素位置的改动,所以我现在都是用 position:relative 然后再用 top left 等将其移动我需要的位置,这样就可以做到既不更改 DOM 结构,又可以很快捷不会出差错的完成任务,每次这个时候我都会感谢发明这个样式标签的人。

至于公司为什么没有招聘专门做前端的人,我的猜想是,多请一个人需要多开一个人的工资,但是我们的一个产品一般也不会超过10个页面,并且每个页面相似度很高,这就会导致前端的工作比较少,花较多的钱雇一个前端不如将前端的活外包出去,按需付钱咯。

这样做导致的问题就是,我们很痛苦,外包出去给回来的 html 页面,并不一定满足要求,往往我要加一个 span 将特定的元素找出来,给个 class,然后就可以写 javascript 了,问题来了,发现新加进去的 span 已经有了样式,每每这个时候,老子都无比抓狂,我勒个去啊,为毛要给 span 标签指定样式啊,你直接给你需要指定样式的元素给个 class 不行么?同理,页面的很多样式都是与结构相关,比如经常会出现这样的代码

为了保持页面的一致性,有可能其它地方也要用到 error 的样式,这个时候问题来了,我直接加 class=”error” 是不行的,因为必须是 form 下的 div 的 class=”error” 才能有这个样式,我勒个去去去啊~直接写成 .error 不行么,在前面加这一串后,样式没有通用性啊。

还有的问题就是,一个页面经常要引入 6 个左右的外部 css 文件,再加上 jqueyui 的 css 文件,得有 7 个了,性能什么的不用考虑,估计公司用的服务器资源还很充足,不用考虑连接数,不用考虑压缩 js css ,不用考虑页面大小,因为经常可以看到大段大段的注释在 html 源文件里面。

好的,吐槽完了~

加入对话

7条评论

  1. position:relative可以结合着position:absolute一起用!直接用js对相对定位元素操作top,left值时,也会引起页面回流和重绘。而这些在绝对定位中就不存在了。还有一点,可能对你有用。position:relative中只能使用left,top。而绝对定位中,left,top,right,bottom都可以使用,其中的值即可为正值,也可以为负。有时通过也可以用这个解决一下IE低版本下的bug。