class 命名规范
Posted myitnews
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了class 命名规范相关的知识,希望对你有一定的参考价值。
抄自:https://www.jianshu.com/p/4945d9cf14e5
一、常见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...
包裹类: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
整体宽度:wrapper
页头:header
内容:content
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
中间内容:center
三、导航
导航:nav
导航:mainnav/globalnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
边导航图标:sidebarIcon
菜单:menu
子菜单:submenu
标题: title
导航: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
登录: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
以上是关于class 命名规范的主要内容,如果未能解决你的问题,请参考以下文章