CSS样式表的规划与组织再续_一套确实可行的方案实例
CSS样式表的规划与组织文章列表
1:《CSS样式表的规划与组织》
2:《CSS样式表的规划与组织(续)_关于@import样式表规则》
3:《CSS样式表的规划与组织再续_一套确实可行的方案实例》
本文相关资料的链接:
web标准的几本推荐书——最近可以关注于web标准设计
Andy Bodd的《样式指南例子》——Andy Budd的样式指南
我做的第二套项目模板实例下载——https://files.cnblogs.com/JustinYoung/20070524_style2.rar
经过上2周的实践和总结,再加上对《CSS Mastery》作者Andy Budd提供的《Style Guide》的研究,如今终于总结出了此套确实可行的CSS样式表的规划组织方案。并利用此方案成功的完成了SRW项目的第二套模板。整个过程,条理很清晰,修改、添加和删除都没有遇到什么问题。是目前我感觉的最好的一套方案。当然这只是我的感觉,如果你有更好的解决方案,请不吝赐教。
在开始我们的方案之前,请大家先来看看Andy Budd的这套《Sample Style Guide》,其中你将收益非浅。 至于为什么要引入Style Guide(样式指南),以及什么是样式指南,我不在此赘述(感兴趣的朋友可以阅读《精通CSS》第一章的第三节)。
更美妙的是,他提供了一个样式指南的例子(我以后有空我将翻译此文章,如果你已经翻译了,请共享之,谢谢。)能给我们很大启发的是3.4节。原文如下:
3.4 CSS Files
- Basic - Basic typography for older browsers. This file imports the layout, general and forms file.
- Layout - The overall page layout. Won't need to touch this one unless the layout changes.
- General - Colours, typography, non structural layout. This is the file you're most likely to need to edit.
- Forms - Form layout and styling. Could break this up into separate page specific files if you wanted.
- Home - Stylesheet to control the homepage and override some of the more general styles
- Print - A basic print stylesheet.fdsf
这个和我在《CSS样式表的规划与组织》中一文的思想很相似(当时我并没有看到Andy Budd的此篇文章)。只是他的分离更合理一些。他建议将css文件分为
因为我们的项目,页面虽然很多,但是布局一般都很统一,并没有很花哨的页面,所以在我的Demo中并把上面的精简了一下。我的规划组织方案css文件列表更改如下:
Print:保留。用于打印的。
这种样式表规划组织方案的好处有很多。
在整个第二套模板的设计过程中,我对此方案感觉良好,总是能在必要的位置,找到必要的样式,让我能有较高的工作效率。谈到工作效率,我想顺便提一下。最近发现用“Microsoft Office SharePoint Designer 2007”来做页面设计很方便,它对样式的管理是所有的工具中最好的。以后有空我会总结一下“Microsoft Office SharePoint Designer 2007”的使用。
最后给第二套模板的一个截图。即使在FireFox中,仍然有很好的表现。
![](https://www.cnblogs.com/images/cnblogs_com/justinyoung/2007/srwDemo.png)
keyword:管理css,css管理,管理样式表,样式表管理,css规划,css组织,css样式表,web标准网站,web标准,web标准资料