dudo博客

6月
13

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

<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",层次深了就不太清晰了。

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



共有(5)条评论

锐风 发表于 2008-6-16 at 09:48 #1楼

但有时候我们会把 CSS 写成:

#wrap #content #xxx { /**/ }

难道还要改成:

#wrap #wrap_content #wrap_content_xxx { /**/ }

??

p.s: 我就是举个例子.[reply=dudo,2009-04-25 09:30 PM]既然是使用id的形式,前面使用子选择符无非就是表达一种隶属关系,那现在写成 #wrap_content_xx {…}就很清晰了[/reply]

[回复]


菠萝油 发表于 2008-6-16 at 13:13 #2楼

钻牛角尖就不好了,作者说的是通常状态下把,这些规则值得学习。[reply=dudo,2009-04-25 09:30 PM]仅仅是作为一种参考来学习~ :)[/reply]

[回复]


lijing0033 发表于 2008-6-17 at 09:35 #3楼

使用+简洁=优秀的css

[回复]


Eazen 发表于 2008-8-15 at 12:09 #4楼

我一直都是按隶属关系写的,不过有时名称会很长,我试过一些精简的方法,比如取前3个字母,或者用数字代替,都不清晰.不知道博主怎么看.

[回复]


kilobug 发表于 2009-1-11 at 16:21 #5楼

我的命名方式比较难记
.box1 { }
.box2 { }
.box3 { }
……
.box100 { }
这些样式负责定义背景、字体、边框、内部等样式,而width、height、position、margin、padding、z-index等一些独立属性不设置
这些独立css属性会用id来进行定义。
例如:

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量