常见class关键词:
类型 | 元素名 | 类型 | 元素名 |
元素项 | -item | 元素头部 | -hd |
元素标题 | -title | 元素内容 | -cont |
元素底部 | -btm | 元素顶部 | -top |
元素中部 | -middle | 元素右则 | -right |
元素左则 | -left |
制定简单规则:
修饰关键词
行为修饰符
如:修饰按钮在鼠标经过的事件,鼠标经过行为修饰符用-hover,所以全名为:ui-btn-hover
类型 | 修饰符名 | 类型 | 修饰符名 |
鼠标经过 | -hover | 获取焦点 | -focus |
失去焦点 | -blur | 鼠标按下 | -mousedown |
键盘按下 | -keydown | 鼠标拖动 | -drag |
不可用、禁用、只读 | -disabled | 可用、启用 | -enabled |
选中(下拉框) | -selected | 选中(选择框) | -checked |
成功 | -success | 失败 | -fail |
错误 | -err | 警告 | -warning |
当前状态 | -current | 显示 | -show |
隐藏 | -hide | 添加 | -add |
删除 | -del | 编辑 | -edit |
阅读、视图 | -view | 返回 | -back |
通过 | -pass |
- 布局类: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...
- 例如:text改为txt、delete改为del,这里针对单个单词组合命名,对词组单词的组合建议不使用缩写或简写
单词 | 缩写 | 说明 |
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 | 包装,外层 |
- 块(Block)的命名规范
- 块的名称是唯一的
- 块的名称和块的功能一致
- 如:菜单应该命名为menu
- 块只能用Class选择器,不能用ID选择器,因为同一个块可能出现在页面的多个地方
- 块的内部是可以在包含多个子块的
- 块名称用小写命名
类型 | 块名 | 类型 | 块名 |
顶部 | topbar | 登录 | login |
快速导航 | quickmenu | 菜单 | menu |
导航 | nav | 搜索框 | searchbox |
关键字 | keywords | 左边栏 | leftside |
右边栏 | rightside | 内容 | content |
左、右菜单 | left/rightmenu | 服务链接 | servicelink |
服务 | service | 底栏 | footerbar |
版权 | copyright | 注册 | register |
新闻 | new | 新闻列表 | news |
列表项 | item | 列表集合 | lists |
元素(Element)的命名规范
- 元素的命名使用块名+元素名的组合方式,之间以中划线(-)隔开。
- 如:块名-元素名
- 元素的命名只能用于Class选择器
- 如:菜单项的元素命名为menu-item
- 使用小写命名
- 以中划线连接,如.item-img
- 使用两个中划线表示特殊化,如.item-img.item-img--small表示在.item-img的基础上特殊化
- 状态类直接使用单词,参考上面的关键词,如.active, .checked
- 图标以icon-为前缀(字体图标采用.icon-font.i-name方式命名)。
- 模块采用关键词命名,如.slide, .modal, .tips, .tabs,特殊化采用上面两个中划线表示,如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
- js操作的类统一加上js-前缀
- 不要超过四个class组合使用,如.a.b.c.d
- 以header为例,我们可以添加前缀表示不同的header,如区块头部.block-hd(hd为header简写),modal头部.modal-hd,文章头部.article-hd。
- 同样标题也可以分为,页面标题.page-tt(title的简写),区块标题.block-tt等
- 样式修饰符:块或元素命名加上样式修饰符,之间用中划线(-)隔开 例:块或元素-样式修饰符
- 样式修饰符的命名只能用于Class选择器
- 使用小写命名
如:某个按钮的宽度加宽,则该按钮的样式修饰符名为long,全名就为:ui-btn-long
类型 | 修饰符名 | 类型 | 修饰符名 |
无上边框 | nobt | 无右边框 | nobr |
无下边框 | nobb | 无左边框 | nobl |
无上(内)边框 | nopt | 无右(内)边框 | nopr |
无下(内)边框 | nopb | 无左(内)边框 | nopl |
无上(内)外框 | nomt | 无右(内)外框 | nomr |
无下(内)外框 | nomb | 无左(内)外框 | noml |
(内)上边框 | pt-10(像素) | (内)右边框 | pr-10(像素) |
(内)下边框 | pb-10(像素) | (内)左边框 | pb-10(像素) |
(外)上边框 | mt-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 |
- 块名或元素名加上行为修饰符,之间用中划线(-)隔开。
- 块或元素名-行为修饰符
- 行为修饰符的命名只能用Class选择器
- 使用小写命名
特殊化class
以上面的tt为例,大概有三种办法:
第一种办法: 追加class特殊化,根据我们上面定义的规则,在.page-tt上追加一个class成为.page-tt.page-tt--user,注意.page-tt--user不是一个独立的class,它使基于.page-tt这个基础上的。
第二种办法: 使用父类,给一个范围,于是形成.page-user .page-tt。
第三种办法:通过父类控制的办法,我们进入第三个要讨论的问题,层级结构。
一般我们使用的是第二种和第三种办法,因为这两种都有共同的.page-tt,可以比较方便控制一些基础共有的样式。
拼图规范
基础组件(ui-step、ui-tab、ui-dropdown等)图片拼成一张图,命名为ui-icon
注:组件与组件之间应该有明显的分割间距,每个组件需要留出足够的空间,方便后期维护
文件命名
- 所有按钮图标拼成一张图,命名为icon-btn
- 所有(除基础组件和按钮以外)公共图标拼成一张图,命名为:icon
- 文件夹名:驼峰命名规则,首字母小写
- 文件名:驼峰命名规则,首字母小写
- 页面文件:驼峰命名规则,首字母小写
- 背景图片:bg-name
- 图标图片:ui-icon(基础或控件图标)、icon(公共图标)、icon-name(其他主题图标)、s-name(拼图图片)
- Logo:logo-主题
- 所拼图文件大小建议控制在500KB内,以提高图片的下载速度