无为清净楼资源网 Design By www.qnjia.com
关于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的官方博客,同样的结构却有截然不同的表现。
看下面的代码:
怎么去命名他们呢?bar1和bar2可以出现在两侧,也可能出现在一侧,无论使用right、left、middle都不太合适。那么怎么去命名会比较合适一点呢?
这里提供一个来自Adobe.com的创意,它使用的是 父元素-栏目组-栏目,其中栏目(column)使用无实际意义的字符表示,如A、B、C等。例如 wrap-AB-A,意思已经ID为wrap的元素下包含着两个div——A和B,现在要进行操作的是A。这样的命名完全和元素没有关系,而且意义还比较清晰。例如上面的命名就可以写成:
"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
问题是,上面的诸如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
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年07月01日
2024年07月01日
- 群星2001-大宅门电视剧原声大碟[首版][WAV+CUE]
- 群星2001-芭啦芭啦樱之花电影原声带AVCD[香港首版][WAV+CUE]
- 群星2001-重回摇滚舞台·纪念薛岳逝世十周年演唱会2CD[引进版][WAV+CUE]
- 群星2001-林夕音乐词典2CD[香港首版][WAV+CUE]
- 《101系列 金声回忆 101 蔡琴》[WAV+CUE][3.23GB]
- 《101系列:True Legend 101 陈百强》[WAV+CUE][2.8GB]
- 《陈百强28CD合集》1979-1993 低速原抓[CUE+WAV][8.3G]
- 【蓝调摇滚】JohnHaydock-2024-StraightLineOnACurvedRoad(FLAC)
- 感受独特魅力《百万双钢琴演奏曲》5CD[WAV+CUE]
- 【古典音乐】安娜·莫福《咏叹调》美国版SACD[WAV+CUE]
- 《法拉利·汽车专用试音碟》名贵音响顶级黑胶金碟[CUE+WAV][478M]
- 群星《惠威试音碟5CD》顶级音质[CUE+APE][1.7G]
- 《101系列:百分百3CD 100首百分百经典金曲》[WAV+CUE][2.9GB]
- 群星.2004-《第八届广州国际高级音响展》HIFI珍藏版[APE+CUE]
- 红音堂《蔡琴往事系列》SQCD紫银合金5CD[wav]