昔洛 的个人博客

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

(゚д゚)σ弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌⊃
评论
歌名 - 歌手
0:00