类名推荐组合规则

类名组合规则：

常见class关键词：

• 布局类：header, footer, container, main, content, aside, page, section

• 包裹类：wrap, inner

• 区块类：region, block, box

• 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span

• 列表类：list, item, field

• 主次类：primary, secondary, sub, minor

• 大小类：s, m, l, xl, large, small

• 状态类：active, current, checked, hover, fail, success, warn, error, on, off

• 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

• 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay

• 星级类：rate, star

• 分割类：group, seperate, divider

• 等分类：full, half, third, quarter

• 表格类：table, tr, td, cell, row

• 图片类：img, thumbnail, original, album, gallery

• 语言类：cn, en

• 论坛类：forum, bbs, topic, post

• 方向类：up, down, left, right

• 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…

• 单词	缩写	说明
  bottom	btm	底部
  button	btn	按钮
  background	bg	背景
  content	cont	内容
  check	chk	选择框
  current	curr	当前的
  delete	del	删除
  text	txt	文本
  disabled	dis	禁用
  foot	ft	底部
  head	hd	头部
  hidden	hide	隐藏
  input	inp	input框
  image	img	图片
  index	idx	索引
  message	msg	消息
  password	pwd	密码
  previous	prev	前面的、上一面
  radio	rad	单选
  register	reg	注册
  select	sel	选择
  tbody	tbd	表格主体
  thead	thd	表格头部
  tfoot	tft	表格底部
  wrap	wp	包装，外层

• 类型	块名	类型	块名
  顶部	topbar	登录	login
  快速导航	quickmenu	菜单	menu
  导航	nav	搜索框	searchbox
  关键字	keywords	左边栏	leftside
  右边栏	rightside	内容	content
  左、右菜单	left/rightmenu	服务链接	servicelink
  服务	service	底栏	footerbar
  版权	copyright	注册	register
  新闻	new	新闻列表	news
  列表项	item	列表集合	lists

• 类型	元素名	类型	元素名
  元素项	-item	元素头部	-hd
  元素标题	-title	元素内容	-cont
  元素底部	-btm	元素顶部	-top
  元素中部	-middle	元素右则	-right
  元素左则	-left

• 类型	修饰符名	类型	修饰符名
  无上边框	nobt	无右边框	nobr
  无下边框	nobb	无左边框	nobl
  无上（内）边框	nopt	无右（内）边框	nopr
  无下（内）边框	nopb	无左（内）边框	nopl
  无上（内）外框	nomt	无右（内）外框	nomr
  无下（内）外框	nomb	无左（内）外框	noml
  （内）上边框	pt-10（像素）	（内）右边框	pr-10（像素）
  （内）下边框	pb-10（像素）	（内）左边框	pb-10（像素）
  （外）右边框	mr-10（像素）	（外）下边框	mb-10（像素）
  （外）左边框	mb-10（像素）	字体颜色	fc-red（颜色）
  字体类型	fm-arial（类型）	字体大小	fs-12（大小）
  背景颜色	bg-red（颜色）	字体加粗	fw-bold
  正常字体	fw-normal	文字下划线	txt-underline
  文字中划线	txt-through	文字居左	txt-l
  文字居右	txt-r	文字垂直居上	txt-t
  文字垂直居下	txt-b	文字居中	txt-c
  文字垂直居中	txt-m	绝对定位	pos-abs
  相对定位	pos-rel	宽度	w-10（像素）
  高度	h-10（像素）	行高	lh-12（像素）
  文本缩进	txt-in	边框宽度	bw-2（像素）
  上边框宽度	btw-2（像素）	下边框宽度	bbw-2（像素）
  左边框宽度	blw-2（像素）	右边框宽度	brw-2（像素）
  减短	-short	加长	-long
  变大	-big	缩小	-small
  向上	-up	向下	-down
  向左	-left	向右	-right
  向前，上一个	-prev	向后，下一个	-next
  低级	level-low	中级	level-middle
  高级	level-high

• 类型	修饰符名	类型	修饰符名
  鼠标经过	-hover	获取焦点	-focus
  失去焦点	-blur	鼠标按下	-mousedown
  键盘按下	-keydown	鼠标拖动	-drag
  不可用、禁用、只读	-disabled	可用、启用	-enabled
  选中（下拉框）	-selected	选中（选择框）	-checked
  成功	-success	失败	-fail
  错误	-err	警告	-warning
  当前状态	-current	显示	-show
  隐藏	-hide	添加	-add
  删除	-del	编辑	-edit
  阅读、视图	-view	返回	-back
  通过	-pass