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 源文件里面。

好的,吐槽完了~

CSS 类的一些规则

最近在公司一直在做页面的改造工作,原有的页面样式表很混乱,都是一个页面一个样式表,有十几个模版,改动时就得一个个来,做这些重复工作还真是一件让人烦躁的事情呢。

昨晚上看了别人的博客,讲到如何分离样式表,如何来写 class ,根据内容还是根据属性,感觉收获很大,以前从来都是用,怎么方便怎么写,看了他人的博客后来又读了 MDN 上的一篇文章,原来自己之前的做法很不可取。

Writing efficient css:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

不能给内联元素设置宽度和高度

昨天在用CSS写一个导航栏的时候,为了让链接的可点击区域变大,我给a元素设置了宽度width 和高度height ,但是发现没有效果,今天搜索块级元素和内联元素时才知道,原来是因为给内联元素设置宽度和高度没有效啊。

(原博客发布时间:2012-03-28 16:13:55)

声明不同,导致ul下li的list-style显示属性不一样

今天在做一个导航栏时发现一个奇怪的问题,两个html文件的body内容一样,引入的是同一个CSS文件,但是一个的ul下li显示有圆点,另一个却不显示圆点。经过仔细对比才发现两个html文件的<!DOCTYOE>声明不同。一个是:

另一个是:

不知道为什么会这样,谁能解答下?

附html文件内容和CSS文件内容:

 

(原博客发布时间:2012-04-08 15:20:30)