对CSS类及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命名更好的方法。

结构化命名

<A href="http://ad.cn.doubleclick.net/click%3Bh=v3|322e|3|0|%2a|o%3B14292014%3B0-0%3B0%3B6694709%3B31-1|1%3B9044161|9062057|1%3B%3B%7Esscs%3D%3fhttp%3a%2f%2fwww.site.com" target=_blank></A>&nbsp; <A href="http://ad.cn.doubleclick.net/click%3Bh=v3|31d9|3|0|%2a|f%3B12037126%3B0-0%3B0%3B6694709%3B31-1|1%3B7654401|7672297|1%3B%3B%7Esscs%3D%3fhttp%3a%2f%2fhttp://www.net.cn/" target=_blank></A>&nbsp;

结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（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的采用这样的命名方式就显得更加适当，因为无论它出现在页面的哪一边，这个名字仍然对开发人员来说直观易懂。