位置：首页>> 网络编程>> 网页设计>> 一种有创意的CSS命名规则

一种有创意的CSS命名规则

作者：dudo　来源：dudo blog　发布时间：2008-06-15 15:18:00　

标签：命名,规则,css,创意

关于CSS中的命名规则（其实我觉得是XHTML元素的命名规则更加合理些）这个问题，已经有很多人在说了，其中也不乏一些真知灼见。不过这种东西也是仁者见仁，智者见智，只要一个团队有统一的命名规则要求，在日常开发和维护中不至于出现混乱就应该说是好的命名规则。比如下面这条基本的命名规则：

外　套	wrap	主导航	mainnav	子导航	subnav
页　脚	footer	整个页面	content	页　眉	header
商　标	label	标　题	title	顶导航	topnav
边导航	sidebar	左导航	leftsidebar	右导航	rightsidebar
旗　志	logo	标　语	banner	子菜单	submenu
容器	container	内容	content	当前的	current

CSS开发命名规则

问题是，上面的诸如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。这样的命名完全和元素没有关系，而且意义还比较清晰。例如上面的命名就可以写成：

<div id="container">
  <div id="container_ABC_A">content</div>
  <div id="container_ABC_A">bar1</div>
  <div id="container_ABC_A">bar2</div>
</div>

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

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

投稿

一种有创意的CSS命名规则

猜你喜欢