前端命名规范

最佳原则
坚持制定好的代码规范。
无论团队人数多少,代码应该同出一门。

1.项目命名
全部采用小写方式, 以下划线分隔。
例:my_project_name

2.目录命名
参照项目命名规则;
有复数结构时,要采用复数命名法。
例:scripts, styles, images, data_models

3.JS文件命名
参照项目命名规则。
例:account_model.js

4.CSS, SCSS文件命名
参照项目命名规则。
例:retina_sprites.scss

5.HTML文件命名
参照项目命名规则。
例:error_report.html

6.css,sass,less的类名和Id命名
类名使用小写字母,以中划线分隔;
eg: .my-first-name

id采用驼峰式命名; 
eg: #myFirstName

sass,less中的变量、函数、混合、placeholder采用驼峰式命名; 
eg: $mainWidth, #mainHeight

7.JS中变量命名
标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)
eg: var myFirstName

'ID'在变量名中全大写
eg: var goodID;

'URL'在变量名中全大写
eg: var reportURL;

'Android'在变量名中大写第一个字母
eg:var AndroidVersion;

'iOS'在变量名中小写第一个,大写后两个字母
eg:  var iOSVersion;

常量全大写,用下划线连接
eg: var MAX_INDEX = 1;

构造函数,大写第一个字母
function Person(name) {
    this.name = name;
}

jquery对象必须以'$'开头命名
          // not good
          var body = $('body');
          // goodvar
          $body = $('body');


8. 图片的命名原则

图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质
例如:广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名: banner
标志性的图片取名为: logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu
装饰用的照片我们取名: pic
不带链接表示标题的图片我们取名: title
范例:banner_sohu.gif  banner_sina.gif  menu_aboutus.gif  menu_job.gif  title_news.gif  logo_police.gif   logo_national.gif   pic_people.jpg
鼠标感应效果图片命名规范为”图片名+_+on/off”。
例如:menu1_on.gif  menu1_off.gif
 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值