关于CSS中的命名规则（其实我觉得是XHTML元素的命名规则更加合理些）这个问题，已经有很多人在说了，其中也不乏一些真知灼见。不过这种东西也是仁者见仁，智者见智，只要一个团队有统一的命名规则要求，在日常开发和维护中不至于出现混乱就应该说是好的命名规则。比如下面这条基本的命名规则： CSS开发命名规则 外套 wrap 主导航 mainnav 子导航 subnav 页脚 footer 整个页面 content 页眉 header 商标 label 标题 title 顶导航 topnav 边导航 sidebar 左导航 leftsidebar 右导航 rightsidebar 旗志 logo 标语 banner 子菜单 submenu 容器 container 内容 content 当前的 current

问题是，上面的诸如leftsidebar,rightsidebar等拥有很强指向性的命名在以后的布局变化中会怎么样呢？如果left出现的位置不是左侧，是中间或者是右侧怎么办呢？如果rightsidebar出现在左侧怎么办呢？这时的命名似乎有点不合逻辑了。有人常和我说，你这样的考虑有意义吗？多余的！真正有几个网站会用同样的结构去做两次不一样的布局，顶多就是改版了，改版的时候连结构都变了，这样的考虑完全多余。的确，经常会有这样的问题，有些网站不一次成形到下次改版前风格基本上不会改变，但是有些网站，比如我的博客，你再去看看PJBlog的官方博客，同样的结构却有截然不同的表现。

看下面的代码： <div> <div>content</div> <div>bar1</div> <div>bar2</div> </div>

怎么去命名他们呢？bar1和bar2可以出现在两侧，也可能出现在一侧，无论使用right、left、middle都不太合适。那么怎么去命名会比较合适一点呢？

这里提供一个来自Adobe.com的创意，它使用的是 父元素-栏目组-栏目，其中栏目（column）使用无实际意义的字符表示，如A、B、C等。例如 wrap-AB-A，意思已经ID为wrap的元素下包含着两个div——A和B，现在要进行操作的是A。这样的命名完全和元素没有关系，而且意义还比较清晰。例如上面的命名就可以写成： <divid="container"> <divid="container_ABC_A">content</div> <divid="container_ABC_B">bar1</div> <divid="container_ABC_C">bar2</div> </div>

"container_ABC_A"，说明是对container下有三个并列的元素（它们的ID分别是A、B、C），目前指向的是第一个，即A。这样做的好处就是不受布局的影响，名称和页面最终表现想分离，不过一个缺点就是，下因为A、B、C的意义使得再次嵌套的时候命名有点“乱”，如 id="container_ABC_A_abc_a"，层次深了就不太清晰了。

个人感觉这样的命名比较新颖，非常值得借鉴。不过正如一开始所说的，“只要一个团队有统一的命名规则要求，在日常开发和维护中不至于出现混乱就应该说是好的命名规则”。

原文连接：http://www.dudo.org/article.asp?id=246