Web开发者（也就是您）可以通过创建CSS类及id名称并使用这些名称来对div以及其他的页面元素、标签进行标识。对开发人员来说，在命名重新定义XHTML标记（tags）的CSS selectors时，必须保证其与预定义的标记准确匹配，但就类以及id选择器名称而言，则仁者见仁，智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。
在阅读了由Andy Clarke（of Stuff and Nonsense and All That Malarkey）以及Eric Meyer所撰写的关于CSS类以及id命名规范的系列文章之后，我开始思考在自己的Web站点设计过程中对类以及ids的命名方式。
直观命名
当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：
top-panel
horizontal-nav
left-side
center-column
right-col
这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的CSS样式的需要。
但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时，这些命名没有涉及文档内容的结构。因此，下面给出了对CSS类以及ID命名更好的方法。
结构化命名
结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（markup）中的类和id名称。
有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容（content）以及标记（markup）进行重用。当你理解这种方式时，很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频（audio）等外观格式上显得非常不合适。因此，应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。
可以按照如下所示的结构化方式来对类以及id名称命名：
branding
main-nav
subnav
main-content
sidebar
这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记（structural markup）的初衷，即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。
即使你不打算在其他的媒体上对Web页面进行格式修改，使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如，结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当，因为无论它出现在页面的哪一边，这个名字仍然对开发人员来说直观易懂。
一些命名惯例
Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一，但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表：
header
content
nav
sidebar
footer
这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢？尽管这是我所希望的，但我并不这么认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时，使用标准化的现货库存 命名方式可以使得寻找页面元素以及对Web站点升级带来方便，尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。
DIV+CSS网页布局对SEO的四大影响
作为一个CSSer，需要懂得的知识是比较多的，前面有UE设置，后面有程序，而在开发的同时，需要考虑到网站优化，包括用户体验和SEO等等。今天与DIV+CSS布局的关系，我们作一些了解，也有着类似的文章，相信大家看了以后，会有收获的。首先了解一下。
主要就是通过对网站的结构，标签，排版等各方面的优化，使Google等搜索引擎更容易搜索网站的内容，并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分，从而获得较好的排名。
一、代码精简
使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高蜘蛛爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到蜘蛛喜欢，这样对收录数量有一定好处。
二、表格的嵌套问题
很多网站如何推广的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，蜘蛛爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。从而减小了搜索效率。
使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，蜘蛛爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。
而DIV+CSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。
这虽然没有得到确认，但还是建议使用Table布局的朋友们，MUR460RLG 在设计时尽可能的不要使用多层表格嵌套，们在文章中说明了这一点，相信他们也不是没有依据的。
三、速度问题
DIV+CSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在蜘蛛爬行时是非常有利的。过多的页面代码可能造成爬行超时，蜘蛛就会认为这个页面无法访问，影响收录及权重。
另一方面，真正的不只是为了追求收录、排名，快速的响应速度是提高用户体验度的基础，这对整个搜索引擎优化及营销都是非常有利的。
四、对排名的影响
基于XTHML标准的DIV+CSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但樂思蜀本人保持这样的观点，有异议者可以拿三组以上基本同等质量的网站对比观察。
我想，这样的情况可能不是排名规则，最大的可能还是蜘蛛爬行网站时，出现以上差异导致收录质量的不同。只要把网页做好了，相信蜘蛛能更快速，简洁的扫描我们的页面，收录更多的内容。
