前端命名规范

前端命名规范

前端命名规范是很重要的，在一个项目中代码的组织结构要清晰易懂，同类型文件可以归类到到相同的文件夹中，文件命名规则需要统一且命名要有意义，英文单词可以写缩写。

掌握web前端开发，首先要了解什么是命名规范。命名规范在前端领域，涉及HTML，css，JavaScript，在HTML代码所有的标签名和属性应该都为小写，属性值应该用引号括起来。元素的id和class都要按照规定命名，代码缩进时要缩进，进行格式化，让代码美观，有时可以给HTML代码添加必要注解。

1 目录规范

项目命名：projectname

全部采用小写方式，以中划线分割。

mall-managerment-system

目录命名

全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数。

vue的项目中的component是中的组件目录，使用kebab-case命名。

样式文件夹：css

脚本文件夹：js

样式类图片文件夹：img

js、css、scss、html、png 文件命名

全部采用小写方式，以中划线分隔

2 图片命名

1.命名顺序

图片命名建议以以下顺序命名：

图片业务（可选） +（mod-）图片功能类别（必选）+ 图片模块名称（可选） + 图片精度（可选）

图片业务：

pp-：拍拍

wx-：微信

sq-：手Q

jd-：京东商城

…

图片功能类别：

mod-：是否公共，可选

icon：模块类固化的图标

logo：LOGO类

spr：单页面各种元素合并集合

btn：按钮

bg：可平铺或者大背景

…

图片模块名称：

goodslist：商品列表

goodsinfo：商品信息

userava tar：用户头像

…

图片精度：

普清：@1x

Retina：@2x | @3x

…

3 HTML/CSS文件命名

确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接且不带其他标点符号，如：

<!-- HTML -->

jdc.html

jdc-list.html

jdc-detail.html

<!-- SASS -->

jdc.scss

jdc-list.scss

jdc-detail.scss

4 ClassName命名

ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “-” 连接

1.命名原则

基于姓氏命名法（继承 + 外来），如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zMnskHSA-1651275618552)(http://labs.qiang.it/ppguide/img/standard-jiapu.png)]

2.模块命名

全站公共模块：以 mod- 开头

<div class="mod-yours"></div>

业务公共模块：以 业务名-mod- 开头

<div class="paipai-mod-yours"></div>

3.常用命名推荐

注意：ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此

<div class="ad"></div>

这种广告的英文或拼音类名不应该出现

另外，敏感不和谐字眼也不应该出现，如：

<div class="fuck"></div>

<div class="jer"></div>

<div class="sm"></div>

<div class="gcd"></div> 

<div class="ass"></div> 

<div class="KMT"></div> 

...

ClassName 含义

about 关于

account 账户

arrow 箭头图标

article 文章

aside 边栏

audio 音频

avatar 头像

bg,background 背景

bar 栏（工具类）

branding 品牌化

crumb,breadcrumbs 面包屑

btn,button 按钮

caption 标题，说明

category 分类

chart 图表

clearfix 清除浮动

close 关闭

col,column 列

comment 评论

community 社区

container 容器

content 内容

copyright 版权

current 当前态，选中态

default 默认

description 描述

details 细节

disabled 不可用

entry 文章，博文

error 错误

even 偶数，常用于多行列表或表格中

fail 失败（提示）

feature 专题

fewer 收起

field 用于表单的输入区域

figure 图

filter 筛选

first 第一个，常用于列表中

footer 页脚

forum 论坛

gallery 画廊

group 模块，清除浮动

header 页头

help 帮助

hide 隐藏

hightlight 高亮

home 主页

icon 图标

info,information 信息

last 最后一个，常用于列表中

links 链接

login 登录

logout 退出

logo 标志

main 主体

menu 菜单

meta 作者、更新时间等信息栏，一般位于标题之下

module 模块

more 更多（展开）

msg,message 消息

nav,navigation 导航

next 下一页

nub 小块

odd 奇数，常用于多行列表或表格中

off 鼠标离开

on 鼠标移过

output 输出

pagination 分页

pop,popup 弹窗

preview 预览

previous 上一页

primary 主要

progress 进度条

promotion 促销

rcommd,recommendations 推荐

reg,register 注册

save 保存

search 搜索

secondary 次要

section 区块

selected 已选

share 分享

show 显示

sidebar 边栏，侧栏

slide 幻灯片，图片切换

sort 排序

sub 次级的，子级的

submit 提交

subscribe 订阅

subtitle 副标题

success 成功（提示）

summary 摘要

tab 标签页

table 表格

txt,text 文本

thumbnail 缩略图

time 时间

tips 提示

title 标题

video 视频

wrap 容器，包，一般用于最外层

wrapper 容器，包，一般用于最外层

命名方式
命名方式一共有四种
第一种小驼峰式命名比如: firstName
第二种大驼峰式命名比如:FirstName
第三种中划线式命名比如:first-name
第四种下划线式命名比如:first_name
每种命名方式使用场景规范不同
小驼峰
使用场景:函数命名，变量命名
大驼峰
使用场景:组件名命名
中划线
使用场景:class，id，标签，属性，文件夹名，文件名，图片名
下划线
使用场景:函数命名，变量命名
命名注意事项
1、正则表达式用Exp结尾
2、命名长度最好在20个字符以内，避免多长带来的阅读不便
3、可读性强的命名优先于简短的命名
4、不要使用拼音，也不要使用中文，实在找不到英语的时候，可以使用拼音，但是要注明5、尽量不要缩写、简写的单词。除了 template =>tmp、message=>msg、image=>imgproperty=>prop这些单词已经被公认的缩写
当然，命名规范有很多，我这只是简单的给大家列出几种，希望大家命名的时候都规范自己代码，这样比如接手的时候，方便。自己接手别人的时候也不难,