设为首页收藏本站
开启辅助访问 切换到宽版

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
搜索
返回列表 发新帖回复
查看: 169|回复: 8

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

[复制链接]
ttx9n

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2008-10-17 19:25:03 | 显示全部楼层 |阅读模式
外　套 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. <divid="container">
  2. <divid="container_ABC_A">content</div>
  3. <divid="container_ABC_B">bar1</div>
  4. <divid="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
关于CSS中的命名规则（其实我觉得是XHTML元素的命名规则更加合理些）这个问题，已经有很多人在说了，其中也不乏一些真知灼见。不过这种东西也是仁者见仁，智者见智，只要一个团队有统一的命名规则要求，在日常开发和维护中不至于出现混乱就应该说是好的命名规则。比如下面这 关于CSS中的命名规则（其实我觉得是XHTML元素的命名规则更加合理些）这个问题，已经有很多人在说了，其中也不乏一些真知灼见。不过这种东西也是仁者见仁，智者见智，只要一个团队有统一的命名规则要求，在日常开发和维护中不至于出现混乱就应该说是好的命名规则。比如下面这条基本的命名规则：
CSS开发命名规则
回复

使用道具 举报

hd1tvqb3

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-12 14:14:21 | 显示全部楼层
来看看！！！
回复 支持 反对

使用道具 举报

9jduu05

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-26 03:25:05 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

do827261756

0

主题

1万

回帖

120

积分

注册会员

Rank: 2

积分
120
发表于 2023-7-16 12:20:08 | 显示全部楼层
sdsadsadsadf
回复 支持 反对

使用道具 举报

nwk53kbd

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-11 15:30:02 | 显示全部楼层
飞飞飞飞飞飞飞飞飞飞飞飞飞
回复 支持 反对

使用道具 举报

wxrf98xr

2

主题

1万

回帖

499

积分

中级会员

Rank: 3Rank: 3

积分
499
发表于 2024-3-20 16:06:27 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

4r8oiin60

6

主题

1万

回帖

247

积分

中级会员

Rank: 3Rank: 3

积分
247
发表于 2024-3-30 11:21:16 | 显示全部楼层
挺不错的东西
回复 支持 反对

使用道具 举报

q42obh

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-4-29 22:29:10 | 显示全部楼层
看看看看看看看看看看看看看看看看看看看看看看看看看看看
回复 支持 反对

使用道具 举报

wangdj110

1

主题

1万

回帖

93

积分

注册会员

Rank: 2

积分
93
发表于 2024-5-9 22:28:35 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

返回列表 发新帖 回复
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-5-20 18:48 , Processed in 0.106623 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表