代码不乱，协作不散：WEUI中的BEM命名魔法

爱编程的喵
154 阅读6分钟

什么是BEM命名规范？

BEM是Block（块）、Element（元素）、Modifier（修饰符）的缩写，是一种CSS命名方法论，旨在创建可复用、可维护的代码。在微信当家框架WEUI中，BEM规范被广泛应用，为前端开发提供了清晰的结构和一致的代码风格。

Block概念：独立的功能组件

Block是一个独立的功能组件，可以被重用。在WEUI中，Block通常以项目代号开头，如.weui-page、.weui-btn、.weui-cells等。

.weui-page {
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.weui-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    min-width: 120px;
    font-weight: 500;
}

每个Block都代表一个独立的UI组件，具有特定的功能和样式，可以在不同的页面中重用。

Element概念：Block的组成部分

Element是Block的组成部分，不能脱离Block单独使用。在BEM中，Element通过双下划线__与Block连接。

.weui-page__header{
    padding: 20px;
    border-bottom: 1px solid #eee;
    text-align: center;
    margin-bottom: 20px;
}

.weui-page__title{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.weui-page__desc{
    font-size: 14px;
    color: #666;
}

在HTML中的应用：

<header class="weui-page__header">
    <h1 class="weui-page__title">按钮组件展示</h1>
    <p class="weui-page__desc">WeUI 风格的按钮设计与应用展示</p>
</header>

通过这种命名方式，我们可以清晰地看到header、title和desc都是weui-page这个Block的组成部分。

Modifier概念：表示状态或变体

Modifier用于表示Block或Element的状态或变体，通过单下划线_连接。

/* 主要按钮样式 */
.weui-btn_primary {
    background-color: #1AAD19;
    color: #fff;
    border: 1px solid #1AAD19;
}

/* 次要按钮样式 */
.weui-btn_default {
    background-color: #f8f8f8;
    color: #333;
    border: 1px solid #ddd;
}

在HTML中的应用：

<a href="javascript:;" class="weui-btn weui-btn_primary">主要操作</a>
<a href="javascript:;" class="weui-btn weui-btn_default">次要操作</a>

这里，_primary和_default表示按钮的两种不同状态或样式。

通用组件的BEM应用

WEUI框架中包含多种通用组件，如button、cell等，它们都遵循BEM规范：

Button组件

<div class="button-sp-area">
    <a href="javascript:;" class="weui-btn weui-btn_primary">确认操作</a>
    <a href="javascript:;" class="weui-btn weui-btn_default">取消操作</a>
</div>

Cell组件

<div class="weui-cells">
    <h3 class="weui-cells__title">个人信息</h3>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <svg>...</svg>
        </div>
        <div class="weui-cell__bd">
            <p>用户名称</p>
        </div>
        <div class="weui-cell__ft">
            张三
        </div>
    </div>
</div>

在这个例子中，weui-cell是Block，weui-cell__hd、weui-cell__bd和weui-cell__ft是Element。

BEM规范对大厂协作的重要性

1. 提高代码可读性

BEM命名规范使代码结构一目了然，开发者可以通过类名快速理解元素的功能和层级关系。

<div class="weui-page">
    <header class="weui-page__header">...</header>
    <main class="weui-page__body">...</main>
</div>

2. 减少CSS选择器冲突

BEM通过特定的命名规则减少了CSS选择器的冲突，避免了样式覆盖问题。

.weui-btn_primary { /* 特定按钮样式 */ }
.weui-btn_default { /* 特定按钮样式 */ }

3. 提高代码可维护性

BEM使CSS模块化，每个组件的样式都是独立的，修改一个组件不会影响其他组件。

4. 便于团队协作

在大型项目中，多人同时开发时，BEM规范确保了命名的一致性，减少了沟通成本。

5. 促进组件复用

BEM鼓励创建独立的块级组件，这些组件可以在不同页面中复用，提高开发效率。

实际案例分析

让我们分析WEUI中的页面结构：

<div class="weui-page">
    <header class="weui-page__header">
        <h1 class="weui-page__title">按钮组件展示</h1>
        <p class="weui-page__desc">WeUI 风格的按钮设计与应用展示</p>
    </header>
    <main class="weui-page__body">
        <!-- 按钮区域 -->
        <div class="button-sp-area">
            <a href="javascript:;" class="weui-btn weui-btn_primary">主要操作</a>
            <a href="javascript:;" class="weui-btn weui-btn_default">次要操作</a>
        </div>
        
        <!-- 单元格列表 -->
        <div class="weui-cells">
            <h3 class="weui-cells__title">个人信息</h3>
            <div class="weui-cell">
                <div class="weui-cell__hd">...</div>
                <div class="weui-cell__bd">...</div>
                <div class="weui-cell__ft">...</div>
            </div>
        </div>
    </main>
</div>

这个页面由多个Block组成：

  • weui-page：页面容器
  • weui-btn：按钮组件
  • weui-cells：列表组件
  • weui-cell：列表项组件

每个Block都有自己的Element和Modifier，形成了清晰的层级结构。

响应式设计中的BEM应用

WEUI还在响应式设计中应用了BEM规范：

@media screen and (max-width: 768px) {
    .weui-page {
        padding: 15px;
    }
    
    .button-sp-area {
        flex-direction: column;
    }
    
    .weui-btn {
        width: 100%;
    }
}

这种方式保持了组件的独立性，同时适应不同的屏幕尺寸。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEUI Button UI 设计</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="weui-page">
        <header class="weui-page__header">
            <h1 class="weui-page__title">按钮组件展示</h1>
            <p class="weui-page__desc">WeUI 风格的按钮设计与应用展示</p>
        </header>
        <main class="weui-page__body">
            <div class="button-sp-area">
                <a href="javascript:;" class="weui-btn weui-btn_primary">主要操作</a>
                <a href="javascript:;" class="weui-btn weui-btn_default">次要操作</a>
            </div>
            
            <div class="weui-cells">
                <h3 class="weui-cells__title">个人信息</h3>
                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="#999"/>
                        </svg>
                    </div>
                    <div class="weui-cell__bd">
                        <p>用户名称</p>
                    </div>
                    <div class="weui-cell__ft">
                        张三
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6.62 10.79C8.06 13.62 10.38 15.94 13.21 17.38L15.41 15.18C15.69 14.9 16.08 14.82 16.43 14.93C17.55 15.3 18.75 15.5 20 15.5C20.55 15.5 21 15.95 21 16.5V20C21 20.55 20.55 21 20 21C10.61 21 3 13.39 3 4C3 3.45 3.45 3 4 3H7.5C8.05 3 8.5 3.45 8.5 4C8.5 5.25 8.7 6.45 9.07 7.57C9.18 7.92 9.1 8.31 8.82 8.59L6.62 10.79Z" fill="#999"/>
                        </svg>
                    </div>
                    <div class="weui-cell__bd">
                        <p>联系电话</p>
                    </div>
                    <div class="weui-cell__ft">
                        138****6666
                    </div>
                </div>
            </div>
            
            <div class="weui-form">
                <div class="weui-cells">
                    <h3 class="weui-cells__title">操作示例</h3>
                    <div class="button-sp-area">
                        <a href="javascript:;" class="weui-btn weui-btn_primary">确认操作</a>
                        <a href="javascript:;" class="weui-btn weui-btn_default">取消操作</a>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #f8f8f8;
    height: 100vh;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
}
.weui-page {
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.weui-page__header{
    padding: 20px;
    border-bottom: 1px solid #eee;
    text-align: center;
    margin-bottom: 20px;
}
.weui-page__title{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}
.weui-page__desc{
    font-size: 14px;
    color: #666;
}

/* 按钮区域样式 */
.button-sp-area {
    padding: 20px;
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* 按钮基础样式 */
.weui-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    min-width: 120px;
    font-weight: 500;
}

/* 主要按钮样式 */
.weui-btn_primary {
    background-color: #1AAD19;
    color: #fff;
    border: 1px solid #1AAD19;
}

.weui-btn_primary:hover {
    background-color: #148c13;
    box-shadow: 0 2px 8px rgba(26, 173, 25, 0.3);
}

/* 次要按钮样式 */
.weui-btn_default {
    background-color: #f8f8f8;
    color: #333;
    border: 1px solid #ddd;
}

.weui-btn_default:hover {
    background-color: #eee;
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 列表样式 */
.weui-cells {
    background-color: #fff;
    margin: 15px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

.weui-cells__title {
    padding: 10px 15px;
    font-size: 16px;
    color: #333;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e5e5e5;
}

.weui-cell {
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
}

.weui-cell:last-child {
    border-bottom: none;
}

.weui-cell__hd {
    margin-right: 10px;
}

.weui-cell__bd {
    flex: 1;
}

.weui-cell__ft {
    color: #888;
    font-size: 14px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .weui-page {
        padding: 15px;
    }
    
    .button-sp-area {
        flex-direction: column;
    }
    
    .weui-btn {
        width: 100%;
    }
}

image.png

总结

BEM命名规范在WEUI框架中的应用，为我们提供了一个优秀的前端代码组织方式。通过Block、Element、Modifier三个概念，我们可以创建结构清晰、易于维护的CSS代码。在大型团队协作中，BEM规范能够显著提高开发效率，减少沟通成本，确保代码质量的一致性。

作为前端开发者，掌握BEM规范不仅有助于理解WEUI等主流框架，也能提升我们自身的代码质量和项目管理能力。在实际开发中，我们应当遵循这些规范，创建可复用、可维护的组件库，为团队协作打下坚实基础。

avatar
文章
阅读
粉丝