语义一致与合理命名，及常见错误

语义一致与合理命名，及常见错误

 

作者JunChen Wu来源www.发布时间22007-3-5 10:37:09发布人Clear

本文主要叙述如何设计结构化 XHTML 页面，以及过程中经常遇到的问题，并且给出我的习惯做法仅供参考。

从流程上说，当 PM 或者架构师将设计规范或者页面结构说明书（wireframes、content inventory等文档）确定下来后，开发团队和设计团队就可以一起起草结构化 XHTML 代码了，包括统一命名、统一代码类型等等。随后程序员写程序，参照结构化 XHTML 代码去输出，设计师用 CSS 设计界面而不改动 XHTML 代码（理想状态下）。

如果需要增删代码，则需要开发工程师或 PM 与设计师一起讨论，意见一致后再确认。

语义一致原则

Using The Right Tag For The Right Job。不要从表现上去决定代码，而要从逻辑结构上。其实这一点我在以前翻译的文章里面多有涉及。说简单点，当你关闭样式表或者IE没有加载样式表时，页面也是如同大纲目录般清晰可理解。

常见错误

• 用span class="title" 来标标题，而对h1~h6视而不见；
• 用一大串的divs 去做 navigation，做 menu，通常情况下这样做不必要；
• Divitis 和 classitis 等常见结构化错误可以参看这篇文章。

合理命名

常看到一些英语不过关的，会把 id 和 class写错。千万不要用拼音缩写，任何一个程序员都会鄙视这种行为。我将谈一下我的命名习惯。不采用带表现得值也是要注意的，比如要避免left/top 等等。

关于id和class

id是一个页面里唯一的，根据我的经验，在团队合作中 id 在整个网站中都最好是唯一的。这样程序员利用 JS 或者设计师写 CSS 的时候也不会犯错，特别是存在多个应用（相当于多个系统）的时候。比如在你的网站里面首页有一个 id 值为 header，某频道里面也有一个 id 为 header，而两者的内容不一致。那前者可以命名为 header_index，后者为 header-channel。

对于图片命名，一般是 type-n-name，如 bg-today-top-ten.jpg 和 logo-site.gif，这样在文件排序的时候非常方便可以知道哪些是背景图，哪些是 logo。在CSS里面也可以如此，但是目前似乎没有CSS整理工具CSS在线整形器。

无论是 id 还是 class，尽量避免同一值不同样式的情况。比如在首页里一个 class 是 more，频道里面也有一个 class 是 more，两者却不是同一种样式。这种情况通常出现在多人团队里，比如A负责A页面，B负责B页面，如果不约定好，就容易产生问题。

常见命名

• 包含 wrapper和container
• 页头 header 或缩写为hd
• 页尾 footer 或缩写为ft
• 导航 nav
• 您的位置 breadcrumbs
• 二级导航 sub_nav
• 侧栏 sidebar或side-column
• 模块 module

写多了就会有很多积累，无论是程序员还是设计师对于命名都是非常头疼的一件事。我对于大家怎么命名、怎么放置文件、书写习惯非常感兴趣。

其他

如果要在一行的左右两侧放文字，你会怎么做？一种写法：

1. <div style="text-align: right;">
2. <span style="float: left;">left text</span>
3. right text
4. </div>

为什么不这么写：

1. <div>
2. <span style="float: right;">right text</span>
3. left text
4. </div>

样例页面

有什么区别呢？在Firefox下去掉样式表可以发现，在第二种方法里，right text显示在left而left text显示在right。有时候left text和right text可能是不相关的，那可以学 Flickr 一样不用span而用div，这样去掉样式表就不在同一行了。

可以看到很多都是应用性的心得，可能在下一个页面里你又换一种方式去写了。标准并没有一套标准去约束它，呵呵。