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文件分为

Basic：基础的，最基础的，即使是一些老的浏览器也能很好的支持的样式放在此处，并且从此导入

Layout：网页布局的，如果你不需要改变布局就不需要更改此文件

General：常规的，颜色呀，样式呀，这里并不涉及页面布局的样式。也许此文件是你最经常更改的。

Forms：表单级的，一些表单的布局与样式。表单级的文件可以根据不同的页面有多个。

Home：主页的，这里的样式可能会覆盖一些General里面的样式。

Print：用于打印的。

 

因为我们的项目，页面虽然很多，但是布局一般都很统一，并没有很花哨的页面，所以在我的Demo中并把上面的精简了一下。我的规划组织方案css文件列表更改如下：

Basic：保留，存放最基本的样式，例如body，*选择器样式等。Layout从此出导入

Layout：保留，网页布局的

General：去除!因为这里面的东西我们完全可以通过主题（theme）来管理

Forms：保留，页面上表单内的布局和样式设定。特殊页面可以建立特殊的Froms样式文件

Home：去除！因为我们的主页很简单，只是一个系统的入口。并不是互联网上的那种主页。

Print：保留。用于打印的。

 

这种样式表规划组织方案的好处有很多。

有理论支持。（andy budd是国际顶尖的网页设计师，有很强的权威性。）因为有一套理论的支持，所以如果出现一些问题。在网上，总能找到可以提供支持的朋友。

类似不同的“命名空间”概念。将不同级别的样式放在不同的“命名空间”里面。低耦合性，方便分离和组合。

每个样式表文件，有很强的“表意性”，当你想找到某个样式的时候，可以顺藤摸瓜，很快的找到。例如，你想修改一下logo图片的位置，一定是到layout.css里面去找，而不是forms.css文件里面。

 

在整个第二套模板的设计过程中，我对此方案感觉良好，总是能在必要的位置，找到必要的样式，让我能有较高的工作效率。谈到工作效率，我想顺便提一下。最近发现用“Microsoft Office SharePoint Designer 2007”来做页面设计很方便，它对样式的管理是所有的工具中最好的。以后有空我会总结一下“Microsoft Office SharePoint Designer 2007”的使用。

 

最后给第二套模板的一个截图。即使在FireFox中，仍然有很好的表现。

keyword：管理css,css管理,管理样式表,样式表管理,css规划,css组织，css样式表，web标准网站，web标准，web标准资料