html的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