突然有想法写这样一篇文章,是对工作的总结,写了CSS有一段时间了,可是我发现,我无法非常标准的规划自己的CSS结构.通常我的做法是建立一个最大的CSS.也就是global.css,然后建立一个link.css,font.css,reset.css,然后就是一些快速填充,用于快速修改的样式表文件…

基本如下

1.Global.css 文件中引入link.css,font.css,reset.css

2.Global.css 中一般写通用的样式,比如图片多大,按钮多长,背景色和背景等.

3.link.css中一般写 A 链接的样式,比如 <a href=」http://www.xxx.com」 ….. 那么相应的就有一个类似与 a[href^=」http:」] {background: url(../images/elementsImages/externalLink.gif) no-repeat right top; padding-right:10px;} 这样的样式文件,给a链接的右上角加入一个代表链接到外部的小图片用于标识 ( IE6不支持 ) 为什么不支持自己去翻 DOM LEVEL 规范.还有mailto:等这些常用的小样式文件(欧美的网站很多引用了这样的效果,国内貌似少).

4.reset.css 这个就不用多说了把,在IE,FF等浏览器下的还原样式文件,多数是对浮动和填充不一致的清理.(盒模型本质上还是有区别的)

5.引用了基础的样式之后就会写一些通用样式的的CSS比如用户管理,有资料管理,短消息管理等等属于用户管理文件夹下的所有页面,我会对其建立一个 umanagerbase.css 这里写一些可能会通用的用户管理目录下的公共css,然后针对每个页面写一个单独的css.

这样做的好处,就是能够让css重用,可是在日常开发中我也发现了很多弊端.

比如:

global.css 引入的文件还是不错.可是如果碰到有 javascript 动态操控 link .href 属性的话,经常会歇菜!!!! ( JavaScript 动态改变属性的话,执行效果相当于重新渲染了一次页面且把所有的css放在 </body>之后执行.

一个页面需要2-3个样式的导入,且如果有大量应用不是特别广泛的css的话,还是会有很多css代码没用而让浏览器白白的解析了……..

样式冲突的危险,这个是在项目中经常看见的,可是暂时也没有好的解决办法.只能在私有的css中重写冲突的css,可以避免冲突.

不过这样做带来的好处就是能够非常快速的完成页面的渲染和重构.至少目前是…代码拿过来马上能使用.(可能是我自己写的HTML和CSS完全配套了把,^_^)

但是这样做我总觉得不太好,希望还有更好的解决方案,先把文章写这里,过一段时间的尝试之后如果有更好的解决方案的话,再重新总结一下.