为什么要学习BEM国际规范？

首先聊一聊我们在写CSS样式表可能会出现的问题：

class取名困难且耗时长：写一个HTML页面，出现数不清的单词，夸张的说是把英语六级单词表翻烂了
CSS命名冲突：好不容易取好了合适的类名，却发现与别的区块的类名冲突了
类名可维护和可读性差：类名取了很多，却不能直观的看出该类的样式作用于哪里

这是普通命名法

<body>
    <div class="page">
      <div class="head">
        <p class="button">按钮</p>
      </div>
    </div>
</body>

这是使用了BEM国际命名法

<body>
  <div class="page">
    <div class="page__hd">
      <p class="page__desc">按钮</p>
    </div>
  </div>
</body>

当我们要写 “按钮” 这个p标签的样式时： 普通命名法：

.head .button {}

》》》~~不仅繁琐，且可能与其他区域相同类名的标签冲突~~

使用BEM国际规范：

.page__desc {}

**》》》**能更直观的看出该样式负责的是哪个标签，且不易于发生类名冲突

现在来正式介绍一下BEM国际规范

BEM国际规范由Yandex（俄罗斯最大的互联网公司之一）提出和推广,BEM已经成为一个开放的规范，并且可以被任何人使用和贡献，许多公司和个人都在遵循BEM规范来管理他们的

BEM（块、元素、修饰符） 是一种用于命名和组织CSS代码的国际规范。它的主要目标是提供一种清晰、一致和可维护的方式来命名和设计CSS类，以便更好地管理大型项目中的样式。

BEM规范将页面的各个部分划分为 "块"（Blocks）、"元素"（Elements）和"修饰符"（Modifiers） 。块代表独立的、可自包含的组件或模块，元素是组成块的不可分割的一部分，而修饰符则用于修改块或元素的外观或行为CSS代码。

使用BEM规范的优势有：

可读性强：BEM通过使用语义化的命名约定，使得代码易于理解和阅读。开发人员可以根据类名快速了解元素之间的关系和结构。
可扩展性好：BEM规范鼓励模块化和低耦合的设计，使得代码更易于维护和扩展。每个块都能够独立运作，减少了对其他块的依赖性。
样式复用性高：BEM通过明确定义块和元素的功能和样式，提高了代码的复用性。相同的块和元素可以在不同的上下文中使用，并且可以很容易地进行样式修改和定制。

剖析WEUI-BTN页面中的优秀思路

先丢效果图和源码

1. 首先来分析html部分内容

<body>
  <div class="page">
    <div class="page__hd">
      <!-- 头部内容 -->
      <div class="page__title">Button</div>
      <div class="page__desc">按钮</div>
    </div>
    <div class="page__bd">
      <div class="button-sp-area">
        <a href="#" class="weui-btn weui-btn_primary">主要操作</a>
        <a href="#" class="weui-btn weui-btn_default">次要操作</a>
        <a href="#" class="weui-btn weui-btn_warn">警告</a>
      </div>
    </div>
  </div>
</body>

页面布局选取类名：

1. 页面布局： 依旧是采用了从外到内，从上到下的原则，将页面分为了上下两个区域，上方区域也分上下区域分别负责布局标题和介绍，下方区域负责展示按钮组件。

2. 选取类名： 这里正是用到了BEM国际规范，元素"（Elements）："__hd" , "__bd" , "__title" , "__desc" 。 修饰符"（Modifiers）： "primary" , "default" , "warn" 。用最简单的单词和 “ __ ” 来定义标签的作用的和父级的关系。

3. 样式复用： 这里按钮的样式除backgrou-color不同，其余都相同，将相同部分用weui-btn类统一写好，提高了代码的复用性。

代码优化： 如果要求对这段代码进行优化，你能想到应该怎么做吗？

语义化： 首先在布局上是没有什么可优化的了，但页面缺少语义化标签，这使得源码可读性降低，也会影响SEO排名。“按钮” 在这里实际上是作介绍作用的描述文本，因此使用语义化标签p比标签div更适合

优化：

<!-- <div class="page__desc">按钮</div> -->
<p class="page__desc">按钮</p>

2. 再来看看CSS部分

首先是对各个端的用户做了字体适配

往往打动人的是细节，针对各端系统字样不同做适配，使得用户在浏览页面时获得更好的视觉体验

body {
      /* 
      字体默认从第一个开始应用，若不存在则跳过，选择下一个字体
      为苹果用户优化 支持苹果特殊字体
       */
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

移动端页面滑动优化

同样weui团队在滑动优化方面和样式兼容性上也做了考虑，添加了 overflow-scrolling -webkit-overflow-scrolling 元素。在部分设备上 overflow-scrolling 未兼容，但 -webkit-overflow-scrolling 在大部分设备上已兼容，当设备兼容 overflow-scrolling 时 overflow-scrolling 将覆盖 -webkit-overflow-scrolling 样式，反之将不会覆盖，保证了各种设备都能获得良好的体验。

 .page {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      /* 设置page高度为一屏高度，用y轴滚动条(overflow-y)显示 */
      overflow-y: auto;
      /* 使得页面滚动更丝滑 */
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
    }

防止长按按键出现误会

这里按钮组件实质上是a标签，长按可能会出现选中按钮上的文本，因此使得用户误解。同样这里也考虑了各设备样式的兼容性，满满的细节。

 .weui-btn {
      /* 
      weblit 代表android chrome apple内核
      user-select 属于比较新的属性
      -webkit-user-select 实验性属性 在新的手机上已支持
      */
      -webkit-user-select: none;
      /* 防止长按出现选中现象，设置该样式为none */
      user-select: none;
    }

重点：CSS选择器的使用

当你看到这些按钮挤在一起你会怎么处理？？？

像这样，给每个按钮添加一个上边距？

.weui-btn {
      margin-top:15px;
}

或者是这样，给每个按钮添加一个下边距？？？

.weui-btn {
      margin-bottom:15px;
}

这两种方法都对，但是不管是上面两种方法都有弊端，都会导致上方或者下方多出一块margin

来看大厂是怎么解决的，上代码

 .weui-btn+.weui-btn {
      margin-top: 16px;
    }

css高级选择器：兄弟选择器
只选择兄弟元素里后一个元素,第一个元素前面没有兄弟元素则不会被选择,则全部的兄弟元素中除第一个外，其他元素都会被选中，完美解决了上述问题，虽然前两种方法再添加一个 nth-child() 伪元素选择器也可以解决问题，但远远不如兄弟选择器简洁明了和便利。

BEM：大厂都在用的CSS代码的国际规范，剖析”weui-bt“源码，用大厂思维写好前端页面