昔洛 的个人博客 昔洛 的个人博客

Bug不空,誓不成佛

目录
前端语法命名规范
/      

前端语法命名规范

前端语法命名规范

一个好的命名规范有利于项目的开发和维护,也有利于团队的协作沟通,如果没有统一的规范,那么等着被同事捅刀子吧,这里不断积累常用的命名规范。

目录命名

  • 项目文件夹:项目名称(英文字母)
  • 样式文件夹:css
  • 脚本文件夹:js
  • 样式类图片文件夹:img
  • 产品类图片文件夹:upload
  • 字体类文件夹:fonts

ClassName 命名

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

ClassName含义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容器,包,一般用于最外层

常见命名

名称说明名称说明
整个顶部header快捷导航栏shortcut
头部header标志logo
购物车shopcar搜索search
热点词hotwrods导航nav
导航左侧.dd .dt导航右侧nav-group
页面底部footer服务模块mod_service
服务内容mod_service_item帮助模块mod_help
帮助模块导航mod_help_nav底部版权mod_copyright
链接部分mod_copyright_links中间部分container
轮播图部分slider_list 或者 focus快报模块newsflash
新闻news生活服务lifeservice
主体盒子main上一个按钮focus-prev
下一个按钮focus-next页 翻页pager
(゚д゚)σ弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌⊃