leechael.orgHome

CSS Framework?

建议先对 Taobao.com UED Team 的 这一篇文章 进行阅读。当然,我的看法已经在后面的留言中说出,基本上我是赞成 Realazy 的观点,不赞成搞 CSS Framework,原留言是:

CSS Framework 的适用性太低,一般都是仅适用于编写者自己和所在的团队。一般通用性较强的只有 reset.css,可能甚至也不会是这般——例如,不同的人对字体的选择有不同的偏好(当然在中文字体世界中没有这么多的选择……),或者, reset.css 对基本上不会用到的元素进行 reset,或许就是一个浪费。
至于 CSS Pattern,个人感觉是,尽可能地使用叠加 class 来定义效果——不知道这算不算是呢?
至于 CSS 文件的请求数问题,这个倒容易解决,例如使用到 reset.css & layout.css, 读取服务器的 reset-layout.css,然后服务器端使用 rewrite 把这个请求指向一个 php 脚本,该 php 脚本自动把这两个 css 文件合并然后输出。对于淘宝这般的站点,大可在请求这类 reset-layout.css 的文件时缓存甚至生成静态文件。

这里只对我这留言内容进行补充。

  • 为快速开发而产生。在好些产品的开发中,或许只有一个后台的开发人员,如果让他继续去调试 CSS 代码,如果没有足够的耐心,很大可能只是得到一个不好的结果,这倒不如使用简单成熟的 Framework 来得实际。就我经验看来,界面的调试比后台程序的编写,需要更大的耐性解决颜色配对、不同浏览器之间的一致性这些小问题。
  • 适用性低。虽然相似的界面有助于用户减低学习成本,但界面上创新,那一个不同于其他站点的颜色,小图案,适合站点需要的小布局,还有好些个性而体贴的设计——这说明,CSS Framework 适用性不高,很多时候只适合用于单个项目之中。若要说哪个文件最能被频繁使用,我会说是 reset.css,但可能很多时候,这个文件也会有所更改,甚至不需要,因为仅是一个简单的 * { margin:0;padding:0;border:none; } 就能满足 reset 的需要了。
  • 个人偏好。设计不同于代码的编写,一个好的站点设计肯定会注入作者的个性要素。曾提及过字体的问题;而不同开发者可能自身所使用的 framework 也是仅适合自身,对于其他开发者来说——或许不适合他们,因为他们有另外的偏好。我较偏向设计师能编写属于他的代码,这一点比熟练使用 Framework 更重要。
  • 我赞成 Realazy 的想法,对于一个团队来说,有一个共同的 Design Pattern 是必须的,至于 framework —— 这个词太庞大了,同一个项目中肯定有重复使用的样式,可以单独出来为同一个文件,以供同一个团队进行重复使用,但是这没有 framework 的适用性。

至于 css 的 http 连接数问题——或者说,从来就不是问题,例如留言中我提及的,利用 Apache Rewrite + PHP 的解决办法,作为延展阅读,可以参考下面的文章:

CSS 及 JavaScript 的兼容性测试(续)

这篇东西本是在上一个星期就该发出来的了。在上一篇文章 CSS 及 JavaScript 的兼容性测试 发文后不够两天,就看到一篇 好文,同样是论述各种 debug 工具,而且比我所收集的更为完整。

文中也提及了好几种 Safari 下的 debug 工具,可惜几乎都是仅适用于 Mac 版本的 Safari。幸好我们还可以打开 Safari 的 debug 菜单:

C:\Documents and Settings\USERNAME\Application Data\Apple Computer\Safari\Preferences.plist

使用任意文本编辑器打开上述路径的这个 xml 文件,加入这句:

<key>IncludeDebugMenu</key>
<true/>

References

CSS 及 JavaScript 的兼容性测试

上一个周末和 Livid 一起花时间解决 v2ex 在 Firefox 3 下的某个问题(见 Livid 的 Firefox 3.0 Beta 的 CSS background 问题);恰好同一天,fcicq 发现 鲜果 在 Firefox 3 及 Konqueror 下的使用也存在一些问题。

一般情况下,我都在 Windows XP 下进行 CSS 的细节优化和 JavaScript 的编写;目前来说,主流浏览器基本都有 Windows 的版本,目前看来,在 Windows 下进行 CSS 的细节优化和 JavaScript 的兼容性测试是较为理想的。

  • IE 6 & IE7。IE7 相对 IE6 来说,有了些许进步,可最不先进的浏览器——这顶帽子还是在它的头上。选择 Windows XP 的原因之一就是 IE6,在 IE6 的市场份额不低于 1% 以前,估计还是得进行 IE6 下的页面测试;或者选择无视 IE 用户。这里推荐一个 for IE6 & IE7 的 debug 工具:My DebugBar。如果你问如何让多个 IE 版本共存,我推荐你在安装 IE7 后使用 Multiple IE 来进行 IE6 甚至 IE5.5 的安装。如果你使用的是 Windows Vista,可参考 这里 查看在 Vista 下安装 IE6 的办法。
  • Firefox。不少开发者都是选择在 Firefox2 下进行开发的,因为各种开发工具实在强大:Web Developer Toolbar, Firebug。当然,我建议你也下载 Firefox3 Mindfield 进行测试,当前版本是 3.0b1, 如果你有兴趣尝鲜,可以像我一般使用 3.0b2。当然,Firefox3 还不足够的完善,如果在测试过程中发现问题,我建议简单地做一个浏览器的检测,当用户使用 Firefox3 婉转地告诉他,由于某些原因暂不支持 Firefox3。
  • Opera。别忘了 Opera。这里有一些 Opera 下的 debug 工具:Web Developer Toolbar & Menu for Opera, Web Accessibility Toolbar, Opera developer tools
  • Safari。现在不再需要为了进行 Safari 的兼容性测试发愁了。值得注意的是,Safari Windows 版本和 Mac 版本还是存在一些细微差异的。Linuxtoy 介绍过一个 在 Linux 下使用 Webkit(Safari 的核心) 的办法,有兴趣的朋友可以试一试。
  • Konqueror。不知道有多少人忽略了这个浏览器呢?我在 Gentoo 下使用的是 xfce4,所以没有安装这个浏览器。据说有人曾把这个移植到 Windows 下,消息真伪未考。现在有安装方便的 Ubuntu,所以把这个浏览器也考虑在内吧。
  • Open Komodo & Firebug Lite。前者是我在 Windows 下使用的编辑器,需要注意的是,在这个编辑器下使用搜狗输入法存在一些问题,建议使用谷歌输入法;后者推荐在本地测试非 Firefox 浏览器时使用。

上面提及的只是常见的浏览器,如果你也是一个苛刻的开发者,希望上面提及的对你有用。