注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飘泊

努力做到全面...

 
 
 

日志

 
 

CSS样式表的规划与组织再续_一套确实可行的方案实例  

2010-03-08 14:40:04|  分类: DIV+CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

本文相关资料的链接:

web标准的几本推荐书——最近可以关注于web标准设计

Andy Bodd的《样式指南例子》——Andy Budd的样式指南   

我做的第二套项目模板实例下载——http://files.cnblogs.com/JustinYoung/20070524_style2.rar

 

 

经过上2周的实践和总结,再加上对《CSS Mastery》作者Andy Budd提供的《Style Guide》的研究,如今终于总结出了此套确实可行的CSS样式表的规划组织方案。并利用此方案成功的完成了SRW项目的第二套模板。整个过程,条理很清晰,修改、添加和删除都没有遇到什么问题。是目前我感觉的最好的一套方案。当然这只是我的感觉,如果你有更好的解决方案,请不吝赐教。

 

在开始我们的方案之前,请大家先来看看Andy Budd的这套《Sample Style Guide》,其中你将收益非浅。 至于为什么要引入Style Guide(样式指南),以及什么是样式指南,我不在此赘述(感兴趣的朋友可以阅读《精通CSS》第一章的第三节)。

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中,仍然有很好的表现。CSS样式表的规划与组织再续_一套确实可行的方案实例 - 蚊子 - 飘泊

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

  •   评论这张
     
    阅读(150)| 评论(0)
    推荐 转载

    历史上的今天

    在LOFTER的更多文章

    评论

    <#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    页脚

    网易公司版权所有 ©1997-2017