速通BEM国际命名规范

BONE
537 阅读5分钟

WeUI（微信 UI）是一款由腾讯微信团队开源的一个基于微信的 Web 开发 UI 框架。它主要为微信 Web 应用提供一套设计语言和实现方案，使得开发者可以快速构建出与微信原生应用风格一致的网页。今天就让我们一起入手微信生态的css开发，学习 BEM 命名国际规范。

image.png

WEUI

微信 Button

以微信UI设计中的按钮（button）为例，它是UI库中的一个组件；何为组件？在我们之前的认知中，页面都是由标签组成的，但是更加成熟的思想是把一个页面由组件组成的；如果说标签是一个个“小兵”，那组件就相当于一个“团”。

image.png

要设计出上面的按钮的样式，首先，我们可以先进行结构分析；显然是嵌套盒子模型：

无标题.png

BEM命名国际规范

我们在编写它的HTML时，可以先来了解一下BEM命名国际规范；新手在写页面时，结构一般不会有太大问题，但是在取类名时候会浪费时间，并且取的类名之间、元素之间不关联，每个取独立的名字。BEM通过Block、Element和Modifier的层级关系，清晰地定义了各部分之间的关联，大大提升了开发效率。

BEM（Block Element Modifier）命名法是一种广泛接受的CSS命名约定，最初由俄罗斯的Yandex公司开发。BEM旨在创建一种清晰、可维护的CSS架构，尤其适合大型项目和团队合作。所以，BEM命名规范在我们工作中项目开发时是很重要的。

BEM的基本概念

  1. Block（块）

    • 代表页面上的独立组件或部分，如.header、.menu或.button。
    • Blocks可以包含多个Elements和/或其他的Blocks。

  2. Element（元素）

    • 是Block的一部分，用于描述Block内部的组成部分。
    • Element的名字总是以Block的名字开头，后跟两个下划线（__）。
    • 例如，.header__logo或.button__text。

  3. Modifier（修饰符）

    • 用于改变Block或Element的外观、状态或行为。
    • Modifier的名字总是以Block或Element的名字开头，后跟两个连字符（--）。
    • 例如，.button--primary或.header--fixed。
image.png

在页面上的每一个区块（block）可以包含多个元素（Element）；Block和Element之间是隶属关系，我们一般用两个下划线（ __ ）连接；如上图中的__hd、 __ bd 、 __ title、 __ desc等都是子元素，hd、bd是区块page的子元素，表示页面头部和body，而title和desc则是子元素hd的子元素，表示页面头部中的两部分；可以看到使用BEM命名会让结构看起来非常的清晰。

完成基本的布局之后，我们就可以开始编写它的css代码：

<style>
        /* css reset 默认样式重置，对所有浏览器都公平
           IE（edge前身）
        */
        *{
            margin: 0;
            padding: 0;
            outline: 0;/*轮廓 不同的浏览器不一样*/
        }
        /* css inherit 继承 */
        body,html{
            height: 100%;
            /* 按上去的高亮颜色 透明*/
            -webkit-tap-highlight-color: transparent;
        }
        body{
            /*为苹果用户优化，支持苹果特殊字体*/
            font-family: system-ui,-apple-system,sans-serif;
        }
        .page,body{
            background-color: #ededed;
        }
        .page{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto;/* page 一屏高度，用滚动条 */
            -webkit-overflow-scrolling: touch;/*滚动如丝般顺滑*/
            
        }
        .page__hd{
            padding: 40px;
        }
        .page__title{
            text-align: left;
            font-size: 20px;/*默认16*/
            margin-bottom: 15px;
            font-weight: 400px;
        }
        .page__desc{
            margin-top: 4px;
            text-align: left;
            font-size: 14px;
            color: rgba(0,0,0,0.55);
        }
        .button-sp-area{
            /* 上右下左 顺时针*/
            margin: 15px auto;
            padding: 15px;
            text-align: center;
        }
        /*weui 基类 css编程的OOP 项目前缀  .tb  .tm  通用.page  .dy*/
        .weui-btn{
            display: block;/*inline -> block*/
            width: 184px;
            margin: 0 auto;
            padding: 12px 24px;
            font-weight: 500;
            font-size: 17px;
            text-align: center;
            text-decoration: none;
            color: #fff;
            line-height: 1.4118;
            border-radius: 8px;
            /*webkit 代表chrome apple等内核
              user-select 是比较新的属性
              作为实验属性 -webkit-user-select 支持 有的新手机上能运行 
            */
            -webkit-user-select: none;
            user-select: none;/* 用户无法选中 防止长按 select 用户会误解*/
            /* margin-bottom: 16px; */
        }
        /*多态*/
        .weui-btn_primary {
            background-color: #07c160;
        }
        .weui-btn_default {
            color: rgba(0,0,0,0.9);
            background-color: rgba(0,0,0,0.5);
        }
        .weui-btn_warn {
            background-color: #fa5151;
        }
        /*css高级选择器 兄弟选择器*/
        .weui-btn+ .weui-btn{
            margin-top: 16px;
        }
    </style>

最终页面完成效果如下：

image.png

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信WEUI源码分析</title>
    <style>
        /* css reset 默认样式重置，对所有浏览器都公平
           IE（edge前身）
        */
        *{
            margin: 0;
            padding: 0;
            outline: 0;/*轮廓 不同的浏览器不一样*/
        }
        /* css inherit 继承 */
        body,html{
            height: 100%;
            /* 按上去的高亮颜色 透明*/
            -webkit-tap-highlight-color: transparent;
        }
        body{
            /*为苹果用户优化，支持苹果特殊字体*/
            font-family: system-ui,-apple-system,sans-serif;
        }
        .page,body{
            background-color: #ededed;
        }
        .page{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto;/* page 一屏高度，用滚动条 */
            -webkit-overflow-scrolling: touch;/*滚动如丝般顺滑*/
            
        }
        .page__hd{
            padding: 40px;
        }
        .page__title{
            text-align: left;
            font-size: 20px;/*默认16*/
            margin-bottom: 15px;
            font-weight: 400px;
        }
        .page__desc{
            margin-top: 4px;
            text-align: left;
            font-size: 14px;
            color: rgba(0,0,0,0.55);
        }
        .button-sp-area{
            /* 上右下左 顺时针*/
            margin: 15px auto;
            padding: 15px;
            text-align: center;
        }
        /*weui 基类 css编程的OOP 项目前缀  .tb  .tm  通用.page  .dy*/
        .weui-btn{
            display: block;/*inline -> block*/
            width: 184px;
            margin: 0 auto;
            padding: 12px 24px;
            font-weight: 500;
            font-size: 17px;
            text-align: center;
            text-decoration: none;
            color: #fff;
            line-height: 1.4118;
            border-radius: 8px;
            /*webkit 代表chrome apple等内核
              user-select 是比较新的属性
              作为实验属性 -webkit-user-select 支持 有的新手机上能运行 
            */
            -webkit-user-select: none;
            user-select: none;/* 用户无法选中 防止长按 select 用户会误解*/
            /* margin-bottom: 16px; */
        }
        /*多态*/
        .weui-btn_primary {
            background-color: #07c160;
        }
        .weui-btn_default {
            color: rgba(0,0,0,0.9);
            background-color: rgba(0,0,0,0.5);
        }
        .weui-btn_warn {
            background-color: #fa5151;
        }
        /*css高级选择器 兄弟选择器*/
        .weui-btn+ .weui-btn{
            margin-top: 16px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="page__hd">
            <div class="page__title">
            Button
            </div>
            <p class="page__desc">
            按钮
            </p>
        </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>
</html>

小结

虽然内容不多，但是BEM的命名规范确实很重要，BEM命名规范提供了一种系统化的、结构清晰的CSS命名策略，它对前端开发，尤其是大型项目和团队协作，有着重要的价值。不仅提高代码可读性和可维护性，还极大地提升了团队的协作效率，是现代前端开发中不可或缺的最佳实践之一。

avatar
文章
阅读
粉丝