CSS样式表规划与管理的经验总结

日期：2007年9月24日作者：查看:[大字体中字体小字体]

　　彻底放弃表格布局，使用xhtml+CSS建站也已经有一年多了。一年多的实践也积累了一定的经验，现在写这篇文章来总结一下。在使用xhtml+CSS建站的过程中有一个比较关键的问题：网站的CSS样式表规划与管理。

我的CSS管理进化史

　　在最初使用CSS来控制网站样式的时候，并不清楚CSS管理规划之类的东西，所写的CSS基本上都是按照需要，随时添加，刚开始还不觉得有什么不好，但是后来越加越多，越改越乱，虽然有一些注释，但到最后还是变得让我自己看着都头疼。那个时候，一个网站所有的CSS都在一个文件中，没有规划，并且排序也没多少规律，于是只能在html页面中找到class的名称，然后在上千行的css代码中搜索自己想要的那个。

　　过了一段时间，思考总结之后，我对站点的CSS样式表进行了初级的规划。在样式表中初步划分了三个区域：

base 样式表
layout 样式表
class 样式表
　　其中“base 样式表”用来描述一些公共性的东西，比如全局性的body、a样式等；“layout 样式表”用来描述具有唯一性的id布局，属于整个页面的框架式布局；“class 样式表”用来描述剩下的class类的样式，这类样式分为可复用样式和通常只在特殊页面出现一次或几次的样式。

　　按照这种方法布局的确提高了不少的效率，但这种方式只适合中小型网站，在大型网站上应用还是略显单薄，至少在多人协作的时候并不能达到最佳效率。于是就有了下面总结的较完善的CSS管理规划模式。

较完善的CSS样式表管理模式

　　step1：个人或者团队需要将主要页面的布局用DIV图的模式按层次画出来，这个DIV图就是在设计原型的基础上，将页面中的主要模块使用的ID名、class名标注出来，方便建立维护文档以便将来进行修改与升级。

　　step2：划分CSS结构，建立全局css及各模块css。在html页面中引用全局css，在全局css中引用各模块css。

建立global.css为全局css，在全局css中定义“* { … } body { … }”之类的全局样式。
在全局样式中通过“@import url(”xxx.css”);”引入模块css。
　　关于模块CSS的划分，我比较喜欢类似wordpress中的css划分方式，一般情况下通过类似下列结构划分：

layout.css /* 整站布局 */
public.css /* 公用组合样式 */
header.css /* 页面头部区域样式 */
sidebar.css /* 侧边栏区域样式 */
main.css /* 主体区域样式 */
footer.css /* 底部区域样式 */
index.css /* 首页区域特有样式 */
form.css /* 表单类样式 */
　　解释一下，layout.css负责整个网站的布局，比如#header, #footer等布局的基本位置及样式设计；public.css负责一些公用样式定义，因为一个class中可以使用class=”navbar font12px”这种利用中间空格分隔的方法来应用多个class样式，所以可以定义一些比较常用的或者在特殊情况下需要修改的公用class，方便局部微调；header.css、sidebar.css、footer.css等模块是对应头部、侧边栏、底部模块的css样式表，可以根据网站的具体需求来增减模块；index.css是一些首页特有元素的css，因为首页的特殊性，我们在设计css的时候通常对首页进行特殊处理，一般情况下，首页是css最复杂的一个页面，有必要对首页的独有css元素进行归类放置，也可以不用@import引入index.css，而把它单独放到首页引用；form.css是表单元素的样式表，表单虽然不难，但控制起来还是比较麻烦的，单独放到一个css文件里方便控制，当然，类似的其他元素你也可以这么处理。
[1] [2] 下一页
CSS样式表规划与管理的经验总结相关文章：
·XP提示“虚拟内存不足”原因总结
·学习CSS制作网页总结的一些经验技巧
·结束SQL注入隐患3招
·Coreldraw结合 R.A.V.E 制作动画
·cn域名收录实验小结
·CSS常见问题和技巧总结
·理解ASP.NET中的三层结构
·HTML基础:HTML的基本结构
·Web 的内容、结构与表现漫谈
·QQ宠物猪猪恋爱结婚之路及问答手册
CSS样式表规划与管理的经验总结相关软件
·《冰封王座》地图：梦之旅团1.41—圣彼得的终结
·《结界师鸟森妖奇谈》（日）模拟器
·《魔鬼终结者》模拟器枪战类街机
·《仙剑奇侠传四》结局动画
·《魔兽》三国姜维传结局电影
·《新结婚时代》
·《请给我结果》
·国民待遇启示录：二元结构下的中国
·第三课堂之户外结绳
·二00四年总结

上一篇:收录的一些常用的SQL语句，也许你能用上

下一篇:XSL-FO 初学者教程：XSL-FO 输出和流

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

CSS样式表规划与管理的经验总结

精品推荐

热点TOP10

特别推荐