class 命名规范

本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注简书: 小贤笔记

注: 文章摘自 penggelies07- 简书, super晴天 - CSDN

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

功能

标志：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

更多专业前端知识，请上【猿2048】www.mk2048.com