🔥BEM 命名 + WEUI 框架！解锁大厂前端协作的 “丝滑” 密码

前言

在前端开发的江湖中，代码的规范与协作就像武林高手的内功，看不见却至关重要💪！今天，咱就来揭秘微信当家框架 WEUI 与 BEM 国际命名规范这对 “黄金搭档”，带你解锁大厂协作的 “丝滑” 密码，让你的代码从此告别混乱，走向人生巅峰✨！

🌟BEM 命名规范：前端代码的 “自律达人”​

BEM，即 Block（块）、Element（元素）、Modifier（修饰符），它就像是前端代码世界里的 “自律达人”，用一套严谨的命名规则，让代码变得井井有条🧐。

📦Block：独立的功能模块

Block 是 BEM 中最基础的单元，它代表一个独立的、完整的功能模块或组件。例如在网页中，一个导航栏、一个商品卡片、一个搜索框都可以看作是一个 Block。它具有高度的独立性和复用性，就像是搭建房屋的预制板，在不同的项目场景中都能直接使用。​

Block 的命名通常以项目或框架的特定前缀开头，比如在 WEUI 框架中，.weui - page表示整个页面模块，.weui - btn表示按钮模块；在普通项目中，也可以自定义前缀，如.my - nav表示自定义的导航栏模块。

🔧Element：Block 内部的组成部分

Element 是 Block 内部的具体元素，是构成 Block 功能和视觉效果的零件。它不能脱离 Block 单独存在，就像汽车的车轮、方向盘离不开汽车整体一样。​

在命名上，Element 通过双下划线__与 Block 连接，例如.weui - page__header表示页面模块中的头部元素，.weui - btn__text表示按钮模块中的文本元素 。这种命名方式清晰地表明了元素与块之间的所属关系。

🎨Modifier：元素的状态与样式变体

Modifier 用于描述 Block 或 Element 的不同状态、样式或功能变体。比如按钮的禁用状态、导航栏的固定状态、卡片的选中状态等。​

Modifier 通过单下划线_与 Block 或 Element 连接，例如.weui - btn_disabled表示禁用状态的按钮，.weui - cell_active表示处于激活状态的单元格。通过 Modifier，开发者可以快速切换组件的外观和行为，实现多样化的效果。

🎯WEUI 框架：微信御用的 “颜值担当”​

WEUI 作为微信的御用框架，堪称前端界的 “颜值担当”😍！它提供了一系列如 button、input、cell 等通用且可复用的组件，不仅样式精美，而且兼容性极佳。结合 BEM 命名规范，在 WEUI 中开发，就像是在玩一场有规则的 “创意游戏”，既能保证代码规范，又能快速实现各种酷炫的界面效果🎮。​

💻实战演练：用代码见证 “魔法”​

接下来，让我们通过一段代码实战，看看 BEM 命名规范和 WEUI 框架是如何 “双剑合璧” 的🔗！

效果图分析

完整HTML代码

<!-- Block -->
<div class="weui-page">
    <!-- Element -->
    <header class="weui-page__header">
        <h1 class="weui-page__title">Button</h1>
        <p class="weui-page__desc">按钮</p>
    </header>
    <!-- main -->
     <main class="weui-page__body">
        <div class="button-sp-area">
            <a href="#" class="weui-btn weui-btn_primary">主要操作</a>
            <a href="#" class="weui-btn weui-btn_disabled">主要操作</a>
            <a href="#" class="weui-btn weui-btn_default">次要操作</a>
            <a href="#" class="weui-btn weui-btn_disabled">次要操作</a>
        </div>
        <div class="weui-cells">
            <h3 class="weui-cells__title">个人信息</h3>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <img src="./2.jpg" alt="">
                </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">
                    <img src="./1.jpg" alt="">
                </div>
                <div class="weui-cell__bd">
                    <p>标题文字</p>
                </div>
                <div class="weui-cell__ft">
                    说明文字
                </div>
            </div>
        </div>
        <div class="weui-forms">
            <h3 class="weui-forms__title">表单组标题</h3>
            <div class="weui-form">
                <div class="weui-form__hd">姓名:</div>
                <div class="weui-form__bd">请输入你的姓名</div>
                <div class="weui-form__tf"></div>
            </div>
            <div class="weui-form">
                <div class="weui-form__hd">号码:</div>
                <div class="weui-form__bd">请输入你的号码</div>
                <div class="weui-form__tf"></div>
            </div>
        </div>
     </main>
</div>

整体结构分析

在这个项目中，遵循 BEM 规范来组织 HTML 结构和 CSS 类名，整体上以weui - page作为顶级的Block，代表整个页面相关的内容。

Block（块）

• .weui - page： 是整个页面的根Block，作为一个独立的、完整的模块，包含了页面的所有内容。它的作用是将整个页面相关的样式和结构进行封装，方便管理和复用。
• .weui - cells： 用于表示个人信息相关的模块，是一个独立的块，包含了个人信息展示相关的内容。
• .weui - forms： 代表表单相关的模块，是一个独立的块，用于组织表单相关的元素。

<div class="weui-page">
    <div class="weui-cells">
        <!-- 代码... -->
    </div>
    <div class="weui-forms">
        <!-- 代码... -->
    </div>
</div>

Element（元素）

• 在.weui - page这个Block中：

  • .weui - page__header：是.weui - page的一个元素，代表页面的头部区域。通过双下划线__与Block名称分隔，清晰表明它是属于.weui - page这个Block内部的特定元素。
  • .weui - page__title：作为.weui - page的元素，是页面头部中的标题部分。
  • .weui - page__desc：也是.weui - page的元素，用于展示页面标题的描述信息。
  • .weui - page__body：表示页面主体部分，是.weui - page的一个元素。

部分代码展示：

<!-- Element -->
<header class="weui-page__header">
    <h1 class="weui-page__title">Button</h1>
    <p class="weui-page__desc">按钮</p>
</header>
<main class="weui-page__body">
<!-- ... -->
</main>

• 在.weui - cells这个Block中：

  • .weui - cells__title：是.weui - cells的元素，用来显示个人信息模块的标题。

  • .weui - cell：是.weui - cells中具体的信息展示单元，属于.weui - cells的元素。

  • 在.weui - cell内部又有：

    • .weui - cell__hd：表示.weui - cell中的头部区域，通常用于放置图片等内容。
    • .weui - cell__bd：是.weui - cell的主体内容区域，用来展示主要文字信息。
    • .weui - cell__ft：代表.weui - cell的尾部区域，展示补充说明文字。

部分代码展示：

 <div class="weui-cells">
    <h3 class="weui-cells__title">个人信息</h3>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <img src="./2.jpg" alt="">
        </div>
        <div class="weui-cell__bd">
            <p>标题文字</p>
        </div>
        <div class="weui-cell__ft">
            说明文字
        </div>
    </div>
</div>

• 在.weui - forms这个Block中：

  • .weui - forms__title：是.weui - forms的元素，用于显示表单组的标题。

  • 在.weui - form（.weui - forms中的具体表单单元，可视为.weui - forms的元素）内部有：

    • .weui - form__hd：表示表单中的标签部分，如 “姓名:”“号码:” 。
    • .weui - form__bd：用于显示表单输入框的提示信息。

部分代码展示：

 <div class="weui-forms">
    <h3 class="weui-forms__title">表单组标题</h3>
    <div class="weui-form">
        <div class="weui-form__hd">姓名:</div>
        <div class="weui-form__bd">请输入你的姓名</div>
        <div class="weui-form__tf"></div>
    </div>
    <div class="weui-form">
        <div class="weui-form__hd">号码:</div>
        <div class="weui-form__bd">请输入你的号码</div>
        <div class="weui-form__tf"></div>
    </div>
</div>

Modifier（修饰符）

• .weui - btn_primary：是.weui - btn（按钮相关的Block）的修饰符，用于表示主要操作按钮，通过单下划线_与Block名称分隔。它可以用来定义主要按钮的样式，如颜色等。
• .weui - btn_disabled： 是.weui - btn的修饰符，表示禁用状态的按钮，通过特定样式（如灰色、不可点击等）来体现按钮的禁用状态。
• .weui - btn_default：是.weui - btn的修饰符，用于表示次要操作按钮，和.weui - btn_primary 区分不同功能和样式的按钮。

 <div class="button-sp-area">
    <a href="#" class="weui-btn weui-btn_primary">主要操作</a>
    <a href="#" class="weui-btn weui-btn_disabled">主要操作</a>
    <a href="#" class="weui-btn weui-btn_default">次要操作</a>
    <a href="#" class="weui-btn weui-btn_disabled">次要操作</a>
</div>

🚀大厂协作：从 “菜鸟” 到 “大神” 的蜕变​

掌握了 BEM 命名规范和 WEUI 框架，你就拥有了进入大厂协作的 “敲门砖”🚪！在大型项目中，统一的命名规范和成熟的框架，能让团队成员之间的沟通更加高效，减少代码冲突和维护成本。从此，你不再是那个被代码混乱折磨的 “菜鸟”，而是能与大厂大神并肩作战的前端 “大神”💫！​

还等什么？赶紧动手实践起来，让你的代码也能拥有大厂范儿👏！如果在使用过程中有任何疑问，或者想分享你的实战经验，欢迎在评论区留言交流哦～一起在前端的道路上越走越远🚀！​