UEDspace

本文转自第七期Uxday 话题的总结，总结的很好，在这里备份下，

本次讨论分为了三个环节，并且采取了分组讨论，汇总的方式进行。三个环节的小标题分别为：结构合理化、样式合理化及素材合理化。详细的提岗如下：

一、 结构合理化

a) 统一的DTD声明 html4.01 xhtml1.0 html5
b) 通过W3C验证
c) 语义化的html 标记应用
d) 语义扩展 microformats或RDFa
e) Class id命名规则一致性,借鉴html5新标记名称和microformats。
f) SEO

二、 样式合理化

a) 样式的分层管理
i. 公共规则层 reset base layout-rules …
ii. 公共模块层 header footer …
iii. 项目模块层 频道、店铺、检索…
iv. 项目文件夹尽量平级，不要多层嵌套

b) 样式的书写
i. 编码 utf-8避免中文字符造成样式读取问题
ii. 注释 统一
iii. 模块区分，避免代码耦合增加维护难度

c）CSS代码压缩
三、 素材合理化
a) 图片类型合理应用 jpg png-32 png-8 gif
b) 图片字节
c) 图片管理
e) css sprites
f) 图片缓存

通过大家对上述的讨论，最后的结果大致如下：

1、关于dtd声明，html4.01 xhtml1.0 html5这三种声明还是根据公司具体情况来决定，特别是技术水平，因为涉及到有一些开发人员，或者编辑，他们还没有接受xhtml的一些严格要求，故而使用html会更好一些。不过从现场情况来看，使用xhtml过渡型的相对较多。

2、关于W3C验证来说，其实有同学谈到了一点很重要，就是验证可以检测我们在书写代码的一些疏落，比如id重复使用，还有标签未必合等问题，但是问题在于如果我们把通过标准验证的代码，交给后端开发以后，并且最终上线，就不敢确定页面是否能够通过标准验证了。所以这是一个问题，不过有些公司关于模板这一块就由前端开发程师来实现，这样可以避免这种问题。

我个人觉得，当你书写完代码以后，还是通过一个验证得好，或者是看一看W3C的提示，来确定是否存在严重的BUG，还有一些是否可以不需修改，比如CSS中的为IE6书写的hack：下划线。养成这样良好的习惯。

3、关于语义化的html,其实这个问题大家有一些偏题了，谈到了为什么要进行语义化html，哈哈！不过听了一下，最后我觉得有一个很有道理，就是语义化html标签，有助于适合于更多平台的客户端，而且他还能够适合于更多人群的浏览，比如盲人，他可以通过听来判断出这段话的意思，比如，我们使用了H1标签，这样他可以确切的知道这就是本页面的中心，还有ul标签，他知道这是一个列表。

回到正题，我觉得语义化html其实是一个很庞大的课题，而且现在有时候从原型上，或者视觉设计上来看，无法确定应该使用什么语义的标签，会有很多歧义，像这种情况下，首先作为一名前端开发工作者，应该对html中的每一个标签的含义搞清楚，第二，网站不是前端开发一个人的事，他是一个产品，大家共同在做产品，这种事情应该和交互设计师确切清楚，他这里究竟是一个什么意思，什么概念，他想表述什么，这样一来，我觉得在做语义化的html的时候，就会容易得多。其实这里的语义化html，就是我们经常嘴里谈到的结构语义化，结构最重要，WEB标准的精髓就在于结构语义化。

4、关于微格式与RDFa这个问题，在场的大多数人都不太了解，所以没有太多的答案，其实这个东西我个人觉得他和我们的命名语义化应该是有很大的关系，所以如果你对此感兴趣，可以到网上去搜索一下，对他进行进一步的了解，对这两个名词，如果大家对此特别感兴趣，我们后期也可以进行专题的讨论。

5、Class、id命名规则一致性，其实说句实在的，这个问题其实对于前端开发工程师来，应该是一个很困扰的问题，因为不知道是使用英文命名还是拼音命名，因为作为中国人，英文水平比较菜。这一点比较悲哀，还有就是关于命名的问题，其实也是一个很大的话题，我建议可以专开一个专题进行讨论，因为我觉得今天的讨论结果，并不理想。

但有人提到了作为重构人员建议只使用class，不要使用Id，把id留给后端工程师或者JS工程师来做，我不同意此观点。

id和class作为css、js与html的一个挂钩，而且有时候我们必须使用ID来明确，语义这个模板，而且不管是xhtml,css还是 js，其实他们都属于前端开发工程师的职责，但是有些公司会把css和js分成两个不同的职位，可以，分工明确，但是我不太喜欢这样的分工，如果遇到这种情况，职位与职位之前完全可以通过规范来约束，而不是说不用id，我觉得这有些霸道了，而且有实为不妥。

5、关于SEO的问题，这个就很难说了，从结构语义化的角度来看，他也算是为SEO服务的，但是具体各搜索引擎怎么抓取页面数据的，怎么去判断的，这就不太清楚了，但是我曾经从谷歌的文档中有看到，他们对h标签是有权重的。

6、其实第二大点，关于样式的合理化，这个问题，我觉得也太大了，而且讨论的时间不是很长，我觉得关于样式的分层管理的问题，在第一次克军说的分为三层就比较合理，第一层，是整站的公共样式，第二层，频道的公共样式，第三层，本页面的个性样式。这样分层就比较合理。这样从谷歌的pages speed的检测上也说得过去，因为他不会检测到对于本页面多余的css代码。关于css的书写，这个的话，其实他又与结构中的class和id定义有关系了，这个问题，我后期专门写一个文章和大家讨论。看是否可行。

7、关于素材的合理化，那主要谈到了背景图片的问题，其实我觉得这个问题，有待研究，今天有位同学说得很对，图片的优化是无止境的，这一点我是同意的，而且听说国外有专人的有写相关的文章，如果你有兴趣，可以去搜一下，今天的交流会主要讨论到了背景图片的使用格式，其实目前来看，主要还是png-8 的使用，当然还有一些同学在使用gif，因为他们对png-8有一些误解，当然色值超过256色的，还是得使用jpg，因为这样存储的效果比其他格式更好，而且得到的文件会更小。还有就是我建议就是当你的图片需要发布的时候，可以使用ywlow的工具进行进一步的无失真的压缩，以保证图片的最小化。

还有就是背景图片的缓存问题，其实在IE6下是有一个BUG的，在网上有一个关于IE6背景图片闪烁的问题，其实就是因为背景图片不被缓存的原因造成的，但是我觉得这个问题我们可以忽略，因为我们需要将IE6从这个大的互联网圈子中淘汰出局，这可能是一句不太负责任的话。

内容大概就这些，如果我有想到其他的，到时候在补充。谢谢各位支持交流会的同学们，也谢谢参加了交流会的同学们，希望你们也能总结一下你们参加这次交流会的心得，同时如果你们对交流会有什么意见或者建议，请告诉我。