首页 > 开发 > CSS > 正文

让XHTML元素的命名规则更加合理

2024-07-11 08:21:14
字体:
来源:转载
供稿:网友
关于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的官方博客,同样的结构却有截然不同的表现。

    看下面的代码:

  1. <div>  
  2.   <div>content</div>  
  3.   <div>bar1</div>  
  4.   <div>bar2</div>  
  5. </div>  

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

    这里提供一个来自adobe.com的创意,它使用的是 父元素-栏目组-栏目,其中栏目(column)使用无实际意义的字符表示,如a、b、c等。例如 wrap-ab-a,意思已经id为wrap的元素下包含着两个div——a和b,现在要进行操作的是a。这样的命名完全和元素没有关系,而且意义还比较清晰。例如上面的命名就可以写成:

  1. <div id="container">  
  2.   <div id="container_abc_a">content</div>  
  3.   <div id="container_abc_b">bar1</div>  
  4.   <div id="container_abc_c">bar2</div>  
  5. </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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表