一种有创意的CSS命名规则
作者:dudo 来源:dudo blog 发布时间:2008-06-15 15:18:00
关于CSS中的命名规则(其实我觉得是XHTML元素的命名规则更加合理些)这个问题,已经有很多人在说了,其中也不乏一些真知灼见。不过这种东西也是仁者见仁,智者见智,只要一个团队有统一的命名规则要求,在日常开发和维护中不至于出现混乱就应该说是好的命名规则。比如下面这条基本的命名规则:
外 套 | wrap | 主导航 | mainnav | 子导航 | subnav |
页 脚 | footer | 整个页面 | content | 页 眉 | header |
商 标 | label | 标 题 | title | 顶导航 | topnav |
边导航 | sidebar | 左导航 | leftsidebar | 右导航 | rightsidebar |
旗 志 | logo | 标 语 | banner | 子菜单 | submenu |
容器 | container | 内容 | content | 当前的 | current |
CSS开发命名规则
问题是,上面的诸如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_A">bar1</div>
<div id="container_ABC_A">bar2</div>
</div>
"container_ABC_A",说明是对container下有三个并列的元素(它们的ID分别是A、B、C),目前指向的是第一个,即A。这样做的好处就是不受布局的影响,名称和页面最终表现想分离,不过一个缺点就是,下因为A、B、C的意义使得再次嵌套的时候命名有点“乱”,如 id="container_ABC_A_abc_a",层次深了就不太清晰了。
个人感觉这样的命名比较新颖,非常值得借鉴。不过正如一开始所说的,“只要一个团队有统一的命名规则要求,在日常开发和维护中不至于出现混乱就应该说是好的命名规则”。
猜你喜欢
- 为了建立冗余较小、结构合理的数据库,设计数据库时必须遵循一定的规则。在关系型数据库中这种规则就称为范式。范式是符合某一种设计要求的总结。要想
- 在PyTorch中,torch.Tensor类是存储和变换数据的重要工具,相比于Numpy,Tensor提供GPU计算和自动求梯度等更多功能
- 一、Pyeharts简介pyecharts 是一个用于生成 Echarts 图表的类库。用 Echarts 生成的图可视化效果很不错,pye
- Python是世界上最受欢迎的编码语言之一,在80年代后期首次受到ABC和Modula-3语言的影响而被概念化。从1991年的第一个版本到成
- 前言官方手册:https://dev.mysql.com/doc/refman/5.7/en/server-logs.html不管是哪个数据
- WebSocket 是什么?摘抄网上的一些解释:WebSocket 协议是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工(f
- 本文实例讲述了Node.js API详解之 Error模块用法。分享给大家供大家参考,具体如下:Node.js API详解之 ErrorNo
- 一、局部变量1 定义在{}里面的变量时局部变量,只能在{}里面有效2 执行到定义的那句话,开始分配内存空间,离开作用域自动进行释放3 作用域
- 要使用request对象的ServerVariables属性,通过它来获得环境变量的值。使用的语法为:Request.ServerVaria
- 本篇文章将讨论使用 Python 中的四种不同方法来使用、管理秒并将其转换为天、小时、分钟和秒。现在,让我们开始讨论这些方法并在一些示例中使
- 在一个大型的项目中,不可避免会出现操作时间的业务,比如时间的格式化,比如时间的加减,我们一般会直接使用moment.js库来做,毕竟稳定可靠
- 如何在生产上部署Django?Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式。uwsgi介绍uW
- 索引概述介绍索引(index)是帮助MySQL高效获取数据的数据结构(有序)。在数据之外,数据库系统还维护着满足 特定查找算法的数据结构,这
- 之前用bash实现过(https://www.jb51.net/article/61943.htm),不过那个不能在windows下使用,所
- <% '#######以下是一个类文件,下面的注解是调用类的方法####################
- Function closeUBB(strContent) '*************************
- 一、什么是线性回归1.线性回归简述线性回归,是一种趋势,通过这个趋势,我们能预测所需要得到的大致目标值。线性关系在二维中是直线关系,三维中是
- 更详细的信息可以去查msdn或者Navigator 2.0以后的说明文档,这里我们之做个简单的说明 包括一下几大属性: appCodeNam
- os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径os.chdir("dirname") 改
- RPC是什么?所谓RPC(remote procedure call 远程过程调用)框架实际是提供了一套机制,使得应用程序之间可以进行通信,