Register  |  Login

(转载)Web 设计:实现干净代码的12条定律

Posted in [文章推荐], [转载区] By Baldwin

漂亮的代码是漂亮网站的基础,优秀的CSS 只存在与同样优秀的HTML 之上,干净的,语义的HTML代码让一个网站更健壮。本文讲述了12个实现干净 Web 设计代码的定律,适合于任何从事 Web 设计的人。

1. Strict DOCTYPE

要做就做对的。不管是HTML 4.01 还是XHTML 1.0,它们都提供 Strict 模式,使用Strict 模式可以保证我们的代码不隐藏任何错误。

参考资料:

2. 字符集声明,特殊字符进行编码处理

字符集声明应当放在head部分的最前面,以便让浏览器知道如何显示网页中的所有内容,包括标题。另外,一些特殊字符,如 & 最好用 & 代替,这是一种最安全的方法。

参考资料:

3. 恰当的缩进

缩进不会影响网页的渲染,但会明显改善阅读源代码时的体验。缩进没有特定的规则,但始终保持一致是个好习惯。

参考资料:

4. 将CSS 和JavaScript 放在外部文件中

将CSS 和JavaScript 放在外部文件中引用,不仅减低单个网页的尺寸,而且意味着其它网页也可以共用这些代码,另外,浏览器的缓存机制可以很好地降低对相同代码的重复下载。

5. 正确地嵌套Tag 标签

如下图,第一行代码中,h1标签嵌套在链接a标签中,尽管多数浏览器会正确渲染,但这不是好的习惯,标签是block 对象,而是inline 对象,inline 对象不应该容纳 block 对象。

6. 消除不必要的div

div常被滥用(尤其在我们现在所处的 DIV+CSS 神话中 - 译者),人们希望把任何东西都放在div中以便为它们分配CSS 式样,这种滥用会导致的臃肿。

参考资料:

7. 使用更好的命名规则

如下图,Cat 的CSS 类被命名为red italic,暗示着Cat 使用红色斜体,如果你想将Cat 改成兰色的粗体呢?

8. 尽量使用CSS 控制文字的排版

如下图所示,不要直接使用大写,用CSS 对这些文字排版方面的格式进行控制,这样会更灵活。

9. 为body分配独立的class/id

为body Tag分配一个独立的class/id,可以很好地定位页面中任何对象,因为页面中所有对象都位于 body 中。

参考资料:

10. 验证

无需多言,你应当尽可能对网页的代码进行验证,尽管有些代码错误浏览器能自动更正,但有些错误是会带来不好的后果的,尤其当你位于 Strict 模式下。即使什么都不为,看到那个绿色的 W3C 验证标志至少可以让自己舒服一些。

W3C 验证是否通过并不一定要什么拘泥,Web 设计中存在更多的考量,只拘泥 W3C 验证结果,可能影响一些更重要的因素,比如,IE6 在 W3C 标准方面存在不少 BUG,如果你为了100%通过 W3C 验证而宣布自己的网站不支持 IE6,至少在国内会得不偿失的 - 译者

参考资料:

11. 合理的结构次序

将网页结构保持一个合乎逻辑的次序。

12. 尽你所能

如果你从零开始写,保持以上的原则当然要容易的多,如果要修改旧的代码,将会很痛苦,一些CMS系统拙劣的编码会让你陷入泥沼,或者你的网站规模宏大要改动的东西太多,不管怎样,始终保持良好的习惯非常重要。

本文国际来源:http://www.smashingmagazine.com/2008/11/12/12-principles-for-keeping-your-code-clean/
中文翻译来源:COMSHARP CMS
Popular tags: CMS, Web 2.0, Web Design
Previous Entry: (转载)谷歌李开复:我的传奇人生源于十句箴言
Next Entry: 如何添加DNN模块的自定义权限

Comments

Was it good for you, too? Join the discussion »

leave a reply

About the author
Baldwin's Status
 Contact Me
Baldwin Sun
Senior Developer for dnn solution & founder of SunBlog module...
网站主页
dnnsun
最新评论
  1. Re: "暴力"解决DNN无法登陆的问题

    你好 有个问题 我改了登录界面后能登录 但是一点注册 就跳到了HOME页 这个怎么解决

    --zl24622

  2. Re: 你的dnn站点慢了么?

    需要你把旁边的checkbox勾选上再执行 :)

    --Baldwin

  3. Re: 你的dnn站点慢了么?

    为什么,我将你的代码copy到host>sql中去执行之后,报错呢,语句是不是有问题哦?

    --claire

  4. Re: 剖析DNN架构-开篇之作

    很好

    --vling83

  5. Re: SunBlog更新:增加3D Tag Clouds插件

    在以上评论已说明, SunBlog已经是一个成熟的商业模块,如果需要授权或下载请邮件联系我们, 感谢你的关注, 我们即将推出一个demo的站点(这周之内).

    --Baldwin

  6. Re: SunBlog更新:增加3D Tag Clouds插件

    这个没地方下载的吗,要怎么才能下载到,谢谢

    --Sun key

  7. Re: SunBlog更新:增加3D Tag Clouds插件

    已经电邮您了,请注意查收

    --sunny0315

  8. Re: 如何添加DNN模块的自定义权限

    你只要设置好该节点即可, 比如:DnnSun.SunBlogNuke.Business.InterfaceController, DnnSun.Modules.SunBlogNuke 其他的请再详细看看本文,我觉得说得蛮清楚的 :)

    --Baldwin

Blog搜索
Rss Feed
feedsky
抓虾
pageflakes
newsgator
哪吒
相册库
更多照片请查看相册库
我们的服务
  • DotNetNuke 咨询
  • Web设计及其模块开发
  • 免费建站
  • 电子商务
  • 开拓市场
我们致力于开发定制的web 2.0 ,所服务的客户主要包括小中型企业,社区俱乐部及其非盈利机构组织。我们将利用开源的DNN作为我们核心的系统机制,更多相关信息...
版权声明
本站任何言论仅代表个人观点,与作者所在的公司没有任何关系,所有贴子皆以“现状”提供且没有任何担保,同时也没有授予任何权利。