腾讯 WEUI 前端框架构建指南及 BEM 命名规范应用

引言

WEUI 是腾讯官方推出的一个移动端前端框架，它提供了丰富的 UI 组件和样式，旨在帮助开发者快速构建优质的移动端页面。本文将介绍如何使用 WEUI 框架来构建一个简单的页面结构，并应用 BEM（Block Element Modifier）国际命名规范来提高代码的可读性和可维护性。

第一步：构建页面结构

1. 总结构 - page 盒子

   首先，我们需要定义一个页面级别的容器，通常命名为 .page。这个容器将包含页面的所有内容。

   html复制代码
   	<div class="page">
   
   	    <!-- 页面内容将放在这里 -->
   
   	</div>
   

2. 上下结构

   在 .page 容器内，我们可以将页面分为上下两部分，通常上面部分是标题和描述，下面部分是按钮区域。

   html复制代码
   	<div class="page">
   
   	    <div class="page__hd">
   
   	        <!-- 标题和描述 -->
   
   	    </div>
   
   	    <div class="page__bd">
   
   	        <!-- 按钮区域 -->
   
   	    </div>
   
   	</div>
   

3. 标题 + 描述

   在 .page__hd 区域内，我们可以添加标题和描述。

   html复制代码
   	<div class="page__hd">
   
   	    <h1 class="page__title">页面标题</h1>
   
   	    <p class="page__desc">页面描述</p>
   
   	</div>
   

4. 按钮区域

   在 .page__bd 区域内，我们可以添加按钮或其他操作元素。

   html复制代码
   	<div class="page__bd">
   
   	    <button class="weui-btn weui-btn_primary">按钮</button>
   
   	</div>
   

第二步：应用 BEM 命名规范

BEM 命名规范是一种简单且高效的命名方式，它根据页面结构和功能区块来命名，有助于提高代码的可读性和可维护性。

1. Block（区块）

   Block 是页面的基本构成单元，它表示一个独立的模块或区块。在上面的例子中，.page、.page__hd 和 .page__bd 都是 Block。

2. Element（元素）

   Element 是 Block 的子元素，它表示 Block 内部的具体组成部分。在上面的例子中，.page__title 和 .page__desc 都是 .page__hd 的 Element。

3. Modifier（修饰符）

   Modifier 用于修改 Block 或 Element 的外观或行为。在 WEUI 中，.weui-btn_primary 就是一个 Modifier，它表示一个主要按钮。

4. 命名套路

   BEM 命名规范通常采用双下划线（__）来分隔 Block 和 Element，采用单下划线（_）来分隔 Block/Element 和 Modifier。例如：.block__element_modifier。

第三步：CSS 源码组织

1. 模块化

   将 CSS 拆分成多个模块，每个模块对应一个独立的 Block 或功能区块。这有助于多人协作和代码管理。

最后：废话不多说上实例

以下是对代码的详细解读：

1. 页面结构：

   • <div class="page">：这是页面的最外层容器。

   • <div class="page__hd">：这是页面的头部区域，通常用于放置页面的标题或导航。

     • <h1 class="page__title">列表页</h1>：页面的主标题，显示为“列表页”。

   • <div class="page__bd">：这是页面的主体区域，用于放置页面的主要内容。

2. 列表项：

   • <div class="weui-cells__title">带说明的列表项</div>：这是一个标题，说明接下来的列表项是带有说明文字的。

   • <div class="weui-cells">：这是WeUI中用于包含多个列表项的容器。

     • <div class="weui-cell">：这是一个列表项容器。

       • <div class="weui-cell__bd">：这是列表项的主体部分，用于放置主要内容，如标题。

         • <p>标题文字</p>：这是列表项的主要文字内容。

       • <div class="weui-cell__ft">：这是列表项的脚部部分，通常用于放置次要信息或操作按钮。

         • 说明文字：这是列表项的说明文字。

注意：

• BEM命名法通过双下划线__和单下划线_来区分块（block）、元素（element）和修饰符（modifier）。例如，page__hd表示page这个块中的头部（head）元素。
• WeUI的组件类名如weui-cells、weui-cell等，是WeUI框架提供的，用于快速构建具有一致风格的UI界面。

如果想要扩展这个页面，比如添加更多的列表项或修改样式，可以继续按照BEM命名法添加新的元素，并使用WeUI提供的组件和样式类。同时，也可以在CSS文件中自定义样式，以满足特定的设计需求。