如何合理的规划站点的CSS样式表.docVIP

如何合理的规划站点的CSS样式表1：样式表文件里面的代码混乱，随着项目的进展，样式表里面的先有代码不敢做任何改变，因为连自己也不知道改了以后会给现有项目造成什么影响。更不敢删除。因为连自己都不知道此处的样式到底什么地方用到了。2：样式表文件体积增大，一个页面即使没有用到多数的样式，但仍然只能引用所有的样式，导致页面的加载缓慢。3：样式表文件里面的代码，就像意大利面条（为什么一定要像意大利的面条？），或者就像中国的兰州拉面。所有的选择器类型全部混在一起。甚至出现很多上下的重复和不一致。4：其他的一些CSS导致的问题。参考：# 按照功能来划分# 1.设置公用的文本样式 typography.css，管理字体列表 大小行高 样式[粗斜]。『文本媒体』# 2.设置公用的链接样式 link.css，管理四种链接l v h a 『链接媒体』# 3.设置公用的布局样式 layout.css，这个省略 『布局代码』# 4.设置公用的广告样式 flash.css， 适用于『动画媒体』# 5.设置公用的图片样式 image.css ，适用于图片新闻内容『图片媒体』# 6.设置公用的视频样式 video.css， 适用于 播放器 播放 『视频音频』# 7.设置公用的**样式 other.css， 适用于 未归类的媒体# 8.设置公用的CSS hack hack.css， 适用于浏览器bug # 按照页面类型来划分# 1.首页样式index.css 省略# 2.子页样式page.css 放置二级栏目样式， # 其中包括了混合『文字』『链接』『广告』『布局』样式# 3.文章样式article.css 放置文章内容样式， # 包括『文字』『图片』『视频』『广告』『布局』样式等等# 4.评论样式comment.css 评论页面样式，可以参考网易评论# 5.代码样式code.css 技术教程类的网站通常需要放置代码，参考csdn博客 blueidea# 6.演示样式demo.css 省略# 7.站点中**类型的页面样式 other.css # 按布局来划分# 1.头部样式header.css 省略# 2.面包屑样式crumb.css 省略# 3.广告样式ad.css 省略# 4.左列样式left.css （一行三列布局，很容易扩充成三行三列布局）# 5.中列样式middle.css 省略# 6.右列样式right.css 省略# 7.第一行样式 row1.css （三行三列布局第一行样式）# 8.第二行样式 row2.css （三行散列布局第二行交互样式altnate.css）# 8.第三行样式 row3.css （三行散列布局第三行样式 可以同第一行，或者另起样式）# 9.友情链接样式 friendlink.css | blogroll.css 省略# 10.新闻公告样式 anounce.css 省略# 11.底部版权样式footer.css 省略# 12.页面中**的区域块 unkown-zone.css