前端专业词汇表（常用英文缩写）

界面命名

序号	单词	词意注释
1	app	整个主程序
2	search	搜索
3	results	结果
3	activity	活动
4	msg / messages	信息
5	home	首页
6	app detail	应用详情
7	personal center	个人中心
8	settings	设置
9	software	软件
10	calendar	日历
11	contacts	联系人
12	news	新闻
13	game	游戏
14	camera	相机
15	control center	控制中心
16	notes	笔记
17	management	管理
18	photo	相片
19	health	健康
20	weather	天气
21	find	发现
22	video	视频
23	mail	邮件
24	watch	手表
25	explore	探索
26	music	音乐
27	maps	地图
28	lock screen	锁屏
29	default	启动图
30	about	关于
31	account	账户
32	arrow	箭头图标
32	article	文章
33	aside	边栏
34	avatar	头像
25	baranding	品牌化
26	crumb	面包屑
27	categoty	分类
28	clo，column	列
29	comment	评论
30	community	社区
31	copyright	版权
32	description	描述
33	details	细节
34	even	偶数，常用于多行列表或表格中
35	odd	奇数，常用于多行列表或表格中
35	feature	专题
36	forum	论坛
36	help	帮助
——	—————————	——————————————————————

控件命名

序号	单词	词意注释
1	edit menu	编辑菜单
2	status bar	状态栏
3	search bar	搜索栏
4	tab bar	标签栏
5	tool bar	工具栏
6	navbar / navigation bar	导航栏
7	alert view	提醒视图
8	pop / popovers	弹出视图
9	table view	表格视图
10	activity view	活动视图
11	switch	开关
12	segmented control	分段控制
13	pickers	选择器
14	popup	弹窗
15	sliders	滑竿
16	scanning	扫描
17	audio	音频
18	video	视频
19	chart	图表
20	clearfix	清除浮动
——	—————————	——————————————————————

功能命名

序号	单词	词意注释
1	ok	确定
2	cancel	取消
3	install	安装
4	uninstall	卸载
5	add	添加
6	delete	删除
7	update	更新
8	max	最大化
9	min	最小化
10	export	导出
11	import	导入
12	menu	菜单	打开菜单
13	select	选择	选择功能
14	forward	前进
15	back	后退
16	search	搜索	搜索文件
17	view	查看	查看文件目录
18	more	更多	目录没有需求的文件，查看更多
19	download	下载	搜索到文件，点击下载
20	loading	加载	文件正在被加载
21	waiting	等待	等待中……
22	refresh	刷新	不耐烦了，刷新一下
23	pause	暂停	有事情，暂停一下
24	continue	继续	继续下载文件
25	restart	重新开始	文件下载失败，重新开始
26	send	发送	下载成功，发送文件
27	close	关闭	然后关闭
28	caption	标题，说明
29	container	容器
30	icon	图标
31	pagination	分页
——	—————	——————	——————————————

资源类型

序号	单词	词意注释
1	img / image	图片
2	scroll	滚动条
3	progress	进度条
4	line	线条
5	icon	图标
6	tab	标签
7	list	列表
8	label	静态文本框
9	radio	单选框
10	checkbox	勾选框
11	btn / button	按钮
12	bg / background	背景
13	animation	动画
14	sign	标记
15	edit	编辑框
16	play	播放
17	combo	自定义下拉框
18	tree	树
19	mask	蒙版
20	content	内容
———	———————	——————————————————

常见状态

序号	单词	词意注释
1	normal	普通
2	focused	获取焦点
3	visited	已访问
4	hover	悬停
5	default	默认
6	press	按下
7	highlight	高亮
8	disabled	禁用
9	selected	高亮，特殊效果
10	error	错误
11	complete	完成
12	blank	空白
13	current	当前态，选中态
14	disabled	不可用
———	—————	————————————————————

位置排序

序号	单词	词意注释
1	top	顶部
2	header	头部
3	middle	中间
4	bottom	尾部
5	last	最后
6	footer	底部
7	mod_service	页面底部服务模块
8	mod_help	页面底部帮助模块
9	mod_copyright	页面底部版权模块
10	first	第一
10	second	第二
———	—————	————————————————————

代码规范

1.类名语义化，尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线_连接

2.类名嵌套层次尽量不超过3层

3.尽量避免直接使用元素选择器

4.CSS属性书写顺序

1.布局属性

display: inline; /* display（建议第一个写，关系到模式） */
position: absolute;
float: left;
clear: both;
visibility: hidden;
overflow: hidden;

2.自身属性

width: 10px;
height: 10px;
margin: 0;
padding: 0;
border: 1px soild skyblue;
background: skyblue url('.png') no-repeat left bottom fixed; 

3.文本属性

color: skyblue;
font: 16px/41px 'microsoft yahei';
text-decoration: none;
text-align: center;
vertical-align: 
write-space: 
break-word: 

4.其他属性

content: 
cursor: 
border-radius: 
box-shadow: 
text-shadow: 
background-image: linear-gradient(red, yellow, blue);

实例

.a {
	/* 1.布局属性 */
	display: block; 
	position: absolute;
	float: left;
	/* 2.自身属性 */
	width: 100px;
	height: 100px;
	margin: 0 auto;
	padding: 20px 0;
	/* 3.字体属性 */
	color: #333;
	font: 16px/41px 'microsoft yahei';
	/* 4.其他属性 */
	backgrounf: rgba(0, 0, 0, .3);
	border-radius: 50%;
}

5.避免使用id选择器

6.避免使用通配符*选择器和!important