0
点赞
收藏
分享

微信扫一扫

类名的命名规范(BEM规范)

类名的命名规范(BEM规范)

BEM
BEM就是块(Block)、元素(element)、修饰符(modifier)的简写
  • -中划线:作为连接字符使用,表示某个块或者某个元素的多单词连接记号
  • __双下划线:双下划线用来连接块和块的子元素
  • --双中划线:双中划线用来描述一个块或者一个元素的的状态

示例:

//中划线的应用
.block-father {}
//双下划线 块__元素
.block-father__element-children
//双中划线
.block-father__element-children--status

  • block代表的是高级的对象或者组件
  • element代表的是block的下级元素、子元素
  • modifier代表的是blockelement的不同状态或者不同版本,比如el-button--primaryel-button--success

类名的推荐命名

布局类: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…

页面结构

need-to-insert-img

容器: container/wrap

整体宽度:wrapper

页头:header

内容:content

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

中间内容:center

导航

need-to-insert-img

导航:nav

导航:mainnav/globalnav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

边导航图标:sidebarIcon

菜单:menu

子菜单:submenu

标题: title

功能

need-to-insert-img

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

注意事项

  • 在深层次的嵌套中,避免过长的样式名称定义,最长的层级不能超过四级,否则会影响阅读

//需要避免的命名方式
.block__element1
.block__element1__element2
//需要修改为
.block__element1
.element1__element2

举报

相关推荐

0 条评论