class命名规范
常见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(
1. 导航：nav
2. 主导航：mainbav
3. ⼦导航：subnav
4. 顶导航：topnav
5. 边导航：sidebar
6. 左导航：leftsidebar
7. 右导航：rightsidebar
8. 菜单：menu
9. ⼦菜单：submenu
10. 标题: title
11. 摘要: summary)
交互类：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
功能
1. - 标志：logo
2. - ⼴告：banner
3. - 登陆：login
4. - 登录条：loginbar
5. - 注册：regsiter
6. - 搜索：search
7. - 功能区：shop
8. - 标题：title
9. - 加⼊：joinus
10. - 状态：status
11. - 按钮：btn
12. - 滚动：scroll
13. - 标签页：tab
14. - ⽂章列表：list
15. - 提⽰信息：msg
16. - 当前的: current
17. - ⼩技巧：tips
导航菜单18. - 图标: icon
19. - 注释：note
20. - 指南：guild
21. - 服务：service
22. - 热点：hot
23. - 新闻：news
24. - 下载：download
25. - 投票：vote
26. - 合作伙伴：partner
27. - 友情链接：link
28. - 版权：copyright
其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view,
例如：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）的命名规范
1. 块的名称是唯⼀的
2. 块的名称和块的功能⼀致
3. 如：菜单应该命名为menu
4. 块只能⽤Class选择器，不能⽤ID选择器，因为同⼀个块可能出现在页⾯的多个地⽅
5. 块的内部是可以在包含多个⼦块的
6. 块名称⽤⼩写命名
类型块名类型块名
顶部topbar登录login
快速导航quickmenu菜单menu
导航nav搜索框searchbox
关键字keywords左边栏leftside
右边栏rightside内容content
左、右菜单left/rightmenu服务链接servicelink
服务service底栏footerbar
版权copyright注册register
新闻new新闻列表news
列表项item列表集合lists
元素（Element）的命名规范
1. 元素的命名使⽤块名+元素名的组合⽅式，之间以中划线(-)隔开。
2. 如：块名-元素名
3. 元素的命名只能⽤于Class选择器
4. 如：菜单项的元素命名为menu-item
5. 使⽤⼩写命名
类型元素名类型元素名
元素项-item元素头部-hd
元素标题-title元素内容-cont
元素底部-btm元素顶部-top
元素中部-middle元素右则-right
元素左则-left
制定简单规则：
以中划线连接，如.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组合使⽤，如.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选择器
使⽤⼩写命名
如：修饰按钮在⿏标经过的事件，⿏标经过⾏为修饰符⽤-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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。