BEM命名规范

KE初学者
326 阅读2分钟

BEM

1. 介绍：

全称: B（Block） E（Element） M（Modifier）
解释:

  • Block:页面中的大区域，表示顶级部分;例如:文章（article）、布局（layout）等;
  • Element:区域中的组成部分;例如: 布局中的头部(layout__header)、文章中的标题(article_title)等;
  • Modifier:可选，通常表示状态;例如:处于展开状态的布局左边栏（layout__left_expand）;

使用: 通过双下划线"__" 例如 weui-btn__hd;
优点：可以隔离样式，提高可读性，避免CSS污染；
在某些大型工程中，如果使用BEM命名法，还可能会增加一个前缀，来表示类名的用途，常见的前缀有：

l: layout，表示这个样式是用于布局的
c: component，表示这个样式是一个组件，即一个功能区域
u: util，表示这个样式是一个通用的、工具性质的样式
j: javascript，表示这个样式没有实际意义，是专门提供给js获取元素使用的

2. 具体使用方式

        <div class="page__hd">
            <h1 class="page__title">Button</h1>
            <p class="page__desc">按钮</p>
        </div>
        <div class="page__bd">
            <div class="button-sp-area">
                <!-- BEM Block Element Modifier
                    weui-btn 按钮的基础类
                    再加状态类名  
                状态下 css 类名里 -->
                <a href="javascript:;" class="weui-btn weui-btn_primary">主要操作1</a>
                <a href="javascript:;" class="weui-btn weui-btn_default">次要操作1</a>
                <a href="javascript:;" disabled class="weui-btn weui-btn_disabled">次要操作1</a>
                <!-- <div class="page_ft"></div> -->
            </div>
        </div>
    </div>

page__ 表示页面但不是组件
weui-btn 表示项目或者公司做前缀的btn 组件
weui-btn__primary 中 primary表示状态（modifier）

3. BEM案例--小试微信服务页面

使用BEM命名来完成服务页面

image.png 通过weui-fw 作为页面功能模块 页面分为两部分 服务页面头部和主体 头部用“weui-fw__hd”来表示 “__right/left”表示左右两个图片盒子
主体用“weui-fw__bd”来表示 “__item”表示出行组件盒子 Html代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BEM-服务</title>
    <link rel="stylesheet" href="./BEM.css">
</head>
<body>
    <div class="weui-fw">
        <!-- 服务页面头部 -->
        <header class="weui-fw__hd">
            <section class="weui-fw__left">
                <img src="./icon/sfk.png" />
                <span>收付款</span>
            </section>
            <section class="weui-fw__right">
                <img src="./icon/qb.png" />
                <span>钱包</span>
                <span class="weui-fw__title">￥5.56</span>
            </section>
        </header>
        <!-- 服务页面主体 -->
        <main class="weui-fw__bd">
            <section class="weui-fw__top">
                <span>交通出行</span>
            </section>
            <section class="weui-fw__middle">
                <a href="#" class="weui-fw__item">
                    <img src="./icon/csfw.png" alt="">
                    <p class="bt">出行服务</p>
                </a>
                <a href="#" class="weui-fw__item">
                    <img src="./icon/hcpjp.png" alt="">
                    <p class="bt">火车票机票</p>
                </a>
                <a href="#" class="weui-fw__item">
                    <img src="./icon/didi.png" alt="">
                    <p class="bt">滴滴出行</p>
                </a>
                <a href="#" class="weui-fw__item">
                    <img src="./icon/jiudian.png" alt="">
                    <p class="bt">酒店</p>
                </a>
            </section>
        </main>
    </div>
</body>
</html>

Css代码：

    margin: 0;
    padding: 0;
}
.weui-fw {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 200px 0;
    box-sizing: border-box;
    background-color: #ddd;
  } 
  .weui-fw__hd{
    height: 160px;
    width: 300px;
    background-color: rgb(10, 202, 84);
    margin: 0 10px;
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .weui-fw__left{
    width:25%;
    text-align: center;
    font-size: 35rpx;
    font-family:宋体;
    margin: 30px 0;
    color:rgb(250, 248, 248);
  }
  .weui-fw__right{
    width:25%;
    text-align: center;
    font-size: 35rpx;
    font-family:宋体;
    margin: 30px 0;
    color:rgb(250, 248, 248);
  }
  .weui-fw__title{
    font-size:20rpx;
    font-family:宋体;
    font-weight: lighter;
    color:rgb(250, 248, 248);
  }
  img{
    width: 55px;
    height: 55px;
    margin-top: 13px;
  }
  .weui-fw__bd{
    width: 300px;
    background-color: #fff;
    margin: 0 10rpx;
    margin-bottom: 15px;
    border-radius: 10px;
  }
  .weui-fw__top{
    padding: 20px 0px  20px 20px ;
    color:rgb(150, 140, 140);
    font-size: 17px;
    font-family:宋体;
  }
  .weui-fw__middle{
    display: flex;
    flex-wrap: wrap;
  }
  .weui-fw__item{
    width:18%;
    text-align: center;
    margin: 0;
    padding: 10px;
  }
  .bt{
    color: black;
    font-family:宋体;
    font-size: 13px;
  }
  a{
      text-decoration: none;
  }

图标来自阿里巴巴矢量图标库：（www.iconfont.cn/home/index?…
相关参考：t.csdn.cn/5SdgR

avatar
文章
阅读
粉丝