命名规则

  • 简单来说完全可以使用 Java 或 C 语言的规范,可以使用连字符"-"链接单词增强辨识度,不要用汉字

常见 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
  • 注册：register
  • 产品：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
  • 生产厂家：manufacturer
  • 型号：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