日期:2013-09-28 浏览次数:21303 次
关于CSS中的命名规则(其实我觉得是XHTML元素的命名规则愈加合理些)这个问题,曾经有很多人在说了,其中也不乏一些一孔之见。不过这种东西也是仁者见仁,智者见智,只需一个团队有统一的命名规则要求,在日常开发和维护中不至于出现混乱就应该说是好的命名规则。比如下面这条基本的命名规则:
外 套 | 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。这样的命名完全和元素没有关系,而且意义还比较清晰。例如上面的命名就可以写成:
<div id="container"> <div id="container_ABC_A">content</div> <div id="container_ABC_B">bar1</div> <div id="container_ABC_C">bar2</div> </div>
"container_ABC_A",说明是对container下有三个并列的元素(它们的ID分别是A、B、C),目前指向的是第一个,即A。这样做的好处就是不受规划的影响,名称和页面最终表现想分离,不过一个缺点就是,下由于A、B、C的意义使得再次嵌套的时候命名有点“乱”,如 id="container_ABC_A_abc_a",层次深