2007-10-14

对于如今的软件开发人员来说,各类五花八门的框架是满天飞,尤其是web开发领域,RoR、Spring、Struts、Zend等等,但要说到CSS框架,知道的人并不多,CSS也有框架吗?有,而且对web开发人员非常有帮助。

随 着Web UI Designer慢慢抛弃传统的table架构,转而纷纷采用xhtml+div+css模式,css的重要性也是与日俱增,往往会占去一个web项目中 一部分较大的工作量。而且时常会遇到各种浏览器兼容的问题,在ie上看起来很美观的页面,放到firefox下浏览却会出现错位等等这类问题。如何有效的 提高开发人员的效率,同时尽可能的解决浏览器兼容问题,于是有了CSS Framework。

什么是CSS框架

  • 框架是个概念性很强的名词,对于CSS来说,所谓的框架就是一些预先定义了全局style重置、一致style设置、form style设置的css文件,这样当启动一个新项目时,可以直接拿来就用,在这些文件的基础上做修改就可以了。
  • CSS框架没必要太复杂和庞大,一般就是以下这几个文件差不多:
    • typography.css 字体修饰
    • grid.css 表格修饰
    • layout.css页面布局修饰
    • form.css 表单修饰
    • general.css 一些常用修饰,如reset修饰等等

使用CSS框架的好处

  • 提高了生产效率并可以避免一些常见的错误。
  • 规范化CSS和HTML代码,如在类似的项目HTML元素都使用相同的IDs和class names。
  • 更加规范了项目流程,如果CSS框架整理了相应的文档,在UI上面一个Team里面的沟通会更加容易。
  • 提高了浏览器兼容性。
  • 你的代码将显得更加清晰、简单、完整以及合理的结构和可读性。

使用CSS框架的坏处

  • 你需要理解整个框架
  • 可能也会引入这个框架本身自带的bug和错误
  • 太依赖于框架,以致对CSS的本质反而不是很了解
  • 源代码相对会比较庞大,因为框架中很多代码可能是你用不到的

CSS框架推荐

2007-10-09

如果一个web开发者的PC到现在还没有装Firefox浏览器,在我看来已经不能算是一个合格的web开发者。首先一个web开发人员需要考虑的 就是跨浏览器问题,Firefox市场份额的急剧扩大,已经是web开发人员在开发过程中必须考虑的一款浏览器,而不像以前只要在ie上测试通过就可以。 还有一个更重要的原因是Firefox数量众多的插件和扩展,对于一个web developer来说,里面有很多非常有价值的工具。合理的利用这些工具,可以让开发事半功倍。

Debugging工具

Firebug - 可以让你实时的编辑html和css源码并preview,分类查看页面中的html、css、javascript代码以及dom树.

JavaScript Debugger - 一个强大的javascript调试工具.

Console Two - 帮助显示页面上的javascript错误和html语法警告.

Analysis分析工具

View Source Chart - 以图表的形式显示页面中用到的颜色.

OperaView - 在Firefox的tab中用opera打开页面.

View Dependencies - 显示当前页面中包含的已经加载的其他文件列表.

lori - 告诉你加载页面花了多长时间.

HTML Validator - HTML语法校验插件,会分析当前页面的html中出现的错误和警告.

CSS Validator - 验证css语法.

RSS Validator - 验证RSS格式.

Window Resizer - 调整窗口大小到各类标准大小,如1024*768,800*600等等,方便在各个大小下查看页面的显示效果.

IE Tab - 在firefox的tab中用ie打开页面.

ViewSourceWith - 默认情况下firefox中的“查看页面源代码”使用firefox的一个窗口打开的,这个插件可以指定外部的应用程序来浏览页面源代码。

CSS

Aardvark - 把鼠标移到页面元素上,会显示当前元素css的attributes和classes.

Font Finder - 功能同Aardvark差不多.

SEO

Niche Watch Tool - Very good plugin that provides you the technical information like backlinks, page rank, keywords strength… everything a webmaster needs to analyze his site.

KGen - This addon retrieves all words of a page and lets you know how many times they appear; interesting for SEO optimization.

其他

Greasemonkey - 允许你通过写javascript在客户端控制网站页面的显示。

ColorZilla - 颜色收集器,把鼠标移到页面元素上,可以显示出当前元素的颜色参数值.

Screengrab! - 保存当前页面为图片.

Image Zoom - 帮助你缩放页面上的图片.

Web Developer - 不多说了,web开发人员必须,功能超级强大.

ShowIP - 显示当前浏览页面对于的IP地址. ServerSpy - 显示当前浏览页面所在web server的具体名称和版本号

Tags: .