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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,194评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,058评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,780评论 0 346
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,388评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,430评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,764评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,907评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,679评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,122评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,270评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,867评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2 348

推荐阅读更多精彩内容