2011-03-29 12:03:10
最近忙于网站首页的改版,完成设计以后,进入到网页html代码的书写阶段,除了规划代码的规则以为,考虑到原先代码的命名有些混乱,想到应该好好的去规范下代码的规范。
以下整理的一些关于代码书写方面的规范的要求,跟大家分享:
首先说一句css对于现在网页很重要,要不怎么经常有人说用css+什么来制作网页呢,理所当然,CSS命名规范也十分重要,规范它的命名有利于代码的语义和团队开发。
先说说网上流传的css命名规范(很多版本)见下表:
| DIV | CSS名称 | 说明 |
|---|---|---|
| 网站公用相关 | ||
| Container div | .container | 容器 |
| Header or banner div | .header | 页头部分 |
| Main or global navigation div | .mainNav | 主导航 |
| Menu | .menu | 菜单 |
| Sub Menu | .submenu | 子菜单 |
| Left or right side columns | .sidebarA, .sidebarB | 左边栏或右边栏 |
| Main div | .main | 页面主体 |
| Content div | .content | 内容部分 |
| The main content area | .contentMain | 主要内容区域 |
| Footer div | .footer | 页脚部分 |
| Tag | .tag | 标签 |
| Message | .msg, .message | 提示信息 |
| Tips | .tips | 小技巧 |
| Vote | .vote | 投票 |
| Friend Link | .friendlink | 友情连接 |
| Title | .title | 标题 |
| Summary | .summary | 摘要 |
| Sub-navigation list | .subNav | 二级导航 |
| Search input | .searchInput | 搜索输入框 |
| Search output | .searchOutput | 搜索输出和搜索结果相似 |
| Search | .search | 搜索 |
| Search results | .searchResults | 搜索结果 |
| Copyright information | .copyright | 版权信息 |
| brand | .branding | 商标 |
| branding-logo | .brandingLogo | LOGO |
| Site information | .siteinfo | 网站信息 |
| Copyright information etc. | .siteinfoLegal | 法律声明 |
| Designer or other credits | .siteinfoCredits | 信誉 |
| Join us | .joinus | 加入我们 |
| Partnership opportunities | .partner | 合作伙伴 |
| Services | .service | 服务 |
| Regsiter | .regsiter | 注册 |
| Status | .status | 状态 |
| 电子贸易相关 | ||
| Products | .products | 产品 |
| Products prices | .productsPrices | 产品价格 |
| Products description | .productsDescription | 产品描述 |
| Products review | .productsReview | 产品评论 |
| Editor's review | .editorReview | 编辑评论 |
| New release | .newsRelease | 最新产品 |
| Publisher | .publisher | 生产商 |
| Screen shot | .screenshot | 缩略图 |
| FAQ | .faqs | 常见问题 |
| Keyword | .keyword | 关键词 |
| Blog | .blog | 博客 |
| Forum | .forum | 论坛 |
这里说一句,尽量别用”#“定义样式,应为在调用的时候会使id来调用。这样就有可能和程序员们使用的id冲突。
下面说说css的常用命名方式:
骆驼式命名法:
正如它的名称所表示的那样,是指混合使用大小写字母来构成变量和函数的名字。例如,下面是分别用骆驼式命名法和下划线法命名的同一个函数:
| printEmployeePaychecks(); print_employee_paychecks(); |
第一个函数名使用了骆驼式命名法,函数名中的每一个逻辑断点都有一个大写字母来标记;第二个函数名使用了下划线法,函数名中的每一个逻辑断点都有一个下划线来标记。
骆驼式命名法近年来越来越流行了,在许多新的函数库和Microsoft Windows这样的环境中,它使用得当相多。另一方面,下划线法是c出现后开始流行起来的,在许多旧的程序和UNIX这样的环境中,它的使用非常普遍。
匈牙利命名法:
广泛应用于象Microsoft Windows这样的环境中。Windows 编程中用到的变量(还包括宏)的命名规则匈牙利命名法,这种命名技术是由一位能干的 Microsoft 程序员查尔斯- 西蒙尼(Charles Simonyi) 提出的。
匈牙利命名法通过在变量名前面加上相应的小写字母的符号标识作为前缀,标识出变量的作用域,类型等。这些符号可以多个同时使用,顺序是先m_(成员变量), 再指针,再简单数据类型,再其它。
例如:m_lpszStr, 表示指向一个以0字符结尾的字符串的长指针成员变量。
匈牙利命名法关键是:标识符的名字以一个或者多个小写字母开头作为前缀;前缀之后的是首字母大写的一个单词或多个单词组合,该单词要指明变量的用途。
帕斯卡(pascal)命名法:
与骆驼命名法类似。只不过骆驼命名法是首字母小写,而帕斯卡命名法是首字母大写,如:
| DisplayInfo(); string UserName; |
二者都是采用了帕斯卡命名法。在C#中,以帕斯卡命名法和骆驼命名法居多。
三种命名规则的小结:
MyData 就是一个帕斯卡命名的示例
而myData是一个骆驼命名法,它第一个单词的第一个字母小写,后面的单词首字母大写,看起来像一个骆驼
而iMyData是一个匈牙利命名法,它的小写的i说明了它的型态,后面的和帕斯卡命名相同,指示了该变量的用途.
您也可以自创命名方式,重在统一、保持。