html的class命名规范（前端类名取名）

发布于：2022-02-03 10:03:18  栏目：技术文档

常见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

相关推荐