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 
交互类：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…

页面结构

容器: container/wrap 
整体宽度：wrapper 
页头：header 
内容：content 
页面主体：main 
页尾：footer 
导航：nav 
侧栏：sidebar 
栏目：column 
中间内容：center

导航

导航：nav 
导航：mainnav/globalnav 
子导航：subnav 
顶导航：topnav 
边导航：sidebar 
左导航：leftsidebar 
右导航：rightsidebar 
边导航图标：sidebarIcon 
菜单：menu 
子菜单：submenu 
标题: title

功能

标志：logo 
登录：login 
登录条：loginbar 
注册：regsiter 
产品：products 
产品价格：productsPrices 
产品评论：productsReview 
编辑评论：editor-review 
最新产品：news-release 
广告/标语：banner 
摘要:summary 
生产商：publisher 
缩略图：screenshot 
常见问题：faqs 
关键词：keyword 
博客：blog 
论坛：forum 
搜索：search 
搜索输入框：search-input 
搜索输出：search-output 
搜索结果：search-results 
加入我们：joinus 
状态：status 
按钮：btn 
滚动：scroll 
标签页：tab 
文章列表：list 
提示信息：msg/message 
当前的: current 
小技巧：tips 
皮肤：skin 
充值：pay 
活动：activities 
推广：promotion 
公告：announcement 
排行：ranking 
公司简介：companyProfile 
公司设备：equipment 
公司荣誉：glories 
企业文化：culture 
企业规模：scaleScale 
营销网络：salesNetwork 
组织机构：organization 
技术力量：technology 
分支机构：branches 
企业资质：EnterpriseQualification 
公司实力：strengthStrength 
经营理念：operationPrinciple 
经理致辞：manager_oration 
发展历程：developmentHistory 
工程案例：EngineeringProjects 
分类浏览：browseByCategory 
应用领域：applicationFields 
人力资源：humanResourceHr 
领导致辞： leader_oration 
客户留言：customerMessage 
客户服务：customerService 
您的要求：yourRequirements 
销售信息：salesInformation 
招商：EnterpriseEstablishing 
教育培训：EducationTraining 
在线交流：onlineCommunication 
质量认证：qualityCertification 
合作***：joinInCooperation 
产品描述：productsDescription 
业务范围：businessScope 
产品销售：salesSales 
联系我们：contactUs 
信息发布：Information 
返回首页：homepage 
产品定购：order 
电子商务：E-business 
版权所有：copy Right 
友情连结：hot Link 
行业新闻：tradeNews 
行业动态：trends 
邮编：postalCodeZipcode 
新闻动态：newsTrends 
公司名称：companyName 
销售***：salesHot_Line 
联系人：contactPerson 
建设中：InConstruction 
证书：certificate 
地址：ADD/Add 
电话：TEL/Tel 
传真：FAX/Fax 
产品名称：productName 
产品说明：description 
价格：price 
***：brand 
规格：specification 
尺寸：size 
生产***：manufacuturer 
型号：model 
产品标号：Item No 
技术指标：techniqueData 
产品描述：description 
产地：productionPlace 
用途：application 
论坛：Forum 
在线订购：on_lineOrder 
招标：bidInviting 
综述：general 
业绩：achievements 
大事：greatEvent 
动态：trends 
服务：service 
投资：Investment 
行业：Industry 
规划：programming 
环境：environment 
发送：delivery 
提交：submit 
重写：reset 
社区：community 
业务：business 
在线调查：onlineInquiry 
下载中心：download 
意见反馈：feedback 
常见问题：FAQ 
中心概况：generalProfile 
游乐园：amusementPark 
专题报道：specialReport 
图标: icon 
注释：note 
指南：guild 
服务：service 
热点：hot 
新闻：news 
下载：download 
投票：vote 
商　标：label/branding 
当前位置：breadcrumb/loc 
购物车：shop 
标签：tag 
信誉：siteinfo-credits 
网站信息：siteinfo 
法律声明：siteinfo-legal 
合作伙伴：partner 
友情链接：friendlink 
版权：copyright

规则

以中划线连接，如 .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