[干货] BEM规范实践—美团底部导航栏

睡个好jo
347 阅读6分钟

大家好，我是睡个好Jo，很高兴能在这里和大家分享一些关于前端开发的实用知识。在为用户提供既美观又流畅的界面体验是每个开发者不懈的追求。本文将深入探讨微信UI库（WEUI）的基础与应用，通过一个实践案例——构建底部导航栏，展示如何结合BEM（Block Element Modifier）命名规范来提升代码的可维护性和可读性。同时，我们还将强调HTML语义化的重要性，及其对网页可访问性和搜索引擎优化（SEO）的积极影响。

微信UI库（WEUI）简介

WEUI是腾讯官方提供的针对微信客户端的UI库，它包含了一系列经过精心设计的、适用于微信内网页和小程序的UI组件。WEUI的目的是帮助开发者快速搭建出符合微信设计风格的界面，提升用户体验。

开发第一个组件：Button

在WEUI中，Button是最基础也是最常用的组件之一，它体现了简洁、直观的设计原则。要使用WEUI的Button，首先需要在项目中引入WEUI的CSS文件，然后通过HTML标签和适当的类名来创建Button。

<button class="weui_btn weui_btn_primary">主要按钮</button>

然而，在此例中，我们将重点放在理解BEM命名规范及其在微信生态CSS开发中的应用，因此直接采用BEM思想构建一个底部导航栏作为示例。

BEM（Block Element Modifier）命名规范

BEM（Block Element Modifier）命名规范的核心在于通过一种逻辑分明的命名体系来提升CSS的可维护性和可扩展性，尤其适合团队协作和大型项目开发。下面是BEM命名规范的详细解读和应用实例：

  • Block：一个可重用的、独立的组件，如.weui-tabbar。 定义：Block代表了一个独立的、可重用的组件或一个页面区域，它是用户界面中具有完整意义的一部分。例如，一个导航栏、一个卡片或一个对话框都可以被视为一个Block。 .weui-tabbar 表示一个标签栏区块，这里的.weui-前缀通常用来表示项目的命名空间，以避免与其他库或框架的类名冲突。
  • Element：Block内部的子元素，依赖于Block，如.weui-tabbar__item。 定义：Element是Block内的组成部分，它没有独立的意义，依赖于所属的Block存在。Elements帮助构建Block的内部结构。 .weui-tabbar__item 表示标签栏中的一个项目元素，双下划线__用来分隔Block和Element，表明Element是Block的一个子部分。
  • Modifier：用于描述Block或Element的状态、外观变化，如.weui-tabbar__item.active。 定义：Modifier用于描述Block或Element的某种特定状态、外观变化或是变体，比如不同的主题、激活状态或大小等。Modifier让组件能够适应不同的场景和需求。 .weui-tabbar__item.active 表示当前被激活的标签项，单下划线_用于分隔Element和Modifier，表示这是一个状态的变化。

实践案例：构建底部导航栏

下面是一个使用BEM规范的底部导航栏示例，结合了前面提到的WEUI风格和BEM命名：

body部分

<body>
    <!-- 页面主要内容区域 -->
    <main>
        <!-- 页面主体内容... -->
    </main>

    <!-- 底部导航栏 -->
    <footer class="weui-tabbar">
        <a href="#" class="weui-tabbar__item weui-tabbar__item--active">
            <img src="./icon/Home.png" alt="首页">
            <p class="weui-tabbar__label ">首页</p>
        </a>
        <a href="#" class="weui-tabbar__item weui-tabbar__item--active">
            <img src="./icon/shipin.png" alt="视频">
            <p class="weui-tabbar__label">视频</p>
        </a>
        <a href="#" class="weui-tabbar__item weui-tabbar__item--active">
            <img src="./icon/youxuan.png" alt="优选">
            <p class="weui-tabbar__label">优选</p>
        </a>
        <a href="#" class="weui-tabbar__item weui-tabbar__item--active">
            <img src="./icon/xiaoxi-zhihui.png" alt="消息">
            <p class="weui-tabbar__label">消息</p>
        </a>
        <a href="#" class="weui-tabbar__item">
            <img src="./icon/wode.png" alt="我的">
            <p class="weui-tabbar__label">我的</p>
        </a>
    </footer>
</body>

该代码片段中的.weui-tabbar即为Block，而.weui-tabbar__item则是Element。通过.weui-tabbar__item--active来表示被激活的导航项状态，体现了Modifier的使用。

css部分

    <style>
        /* 重置部分样式，确保一致的视觉体验 */
        *{
            padding: 0;
            margin: 0;
        }
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        main {
            flex: 1;
            /* 页面主要内容的样式... */
        }

        /* 底部导航栏样式 */
        .weui-tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
            z-index: 999;
        }

        .weui-tabbar__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            text-decoration: none;
            color: #666;
        }

        .weui-tabbar__item img {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
        }

        .weui-tabbar__item--active img {
            filter: brightness(1.2) contrast(1.1);
            
        }

        .weui-tabbar__label {
            font-size: 12px;
        }

整体代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美团底部导航Demo</title>
    <style>
        /* 重置部分样式，确保一致的视觉体验 */
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        main {
            flex: 1;
            /* 页面主要内容的样式... */
        }

        /* 底部导航栏样式 */
        .weui-tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
            z-index: 999;
        }

        .weui-tabbar__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            text-decoration: none;
            color: #666;
        }

        .weui-tabbar__item img {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
        }

        .weui-tabbar__item--active {
            color: red
            
        }

        .weui-tabbar__label {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!-- 页面主要内容区域 -->
    <main>
        <!-- 页面主体内容... -->
    </main>

    <!-- 底部导航栏 -->
    <footer class="weui-tabbar">
        <a href="#" class="weui-tabbar__item .weui-tabbar__item--active">
            <img src="./icon/Home.png" alt="首页">
            <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="#" class="weui-tabbar__item .weui-tabbar__item--active">
            <img src="./icon/shipin.png" alt="视频">
            <p class="weui-tabbar__label">视频</p>
        </a>
        <a href="#" class="weui-tabbar__item .weui-tabbar__item--active">
            <img src="./icon/youxuan.png" alt="优选">
            <p class="weui-tabbar__label">优选</p>
        </a>
        <a href="#" class="weui-tabbar__item .weui-tabbar__item--active">
            <img src="./icon/xiaoxi-zhihui.png" alt="消息">
            <p class="weui-tabbar__label">消息</p>
        </a>
        <a href="#" class="weui-tabbar__item .weui-tabbar__item--active">
            <img src="./icon/wode.png" alt="我的">
            <p class="weui-tabbar__label">我的</p>
        </a>
    </footer>
</body>

</html>

实现效果：

image.png

HTML语义化的重要性

HTML语义化是现代Web开发中的一个核心原则，它强调在编写HTML代码时，应尽可能使用具有明确意义的标签来表达文档结构和内容，而不是仅仅依赖无语义的标签（如<div>和<span>）进行布局。HTML语义化的重要性体现在以下几个方面：

  • 提升可访问性：对于视力受限依赖屏幕阅读器的用户，语义化标签能够帮助他们更好地理解页面结构和内容顺序。例如，<header>、<nav>、<main>、<article>、<aside>和<footer>等标签的使用，让屏幕阅读器可以正确地传达页面的不同区域，使信息的获取更加顺畅。

  • 易于维护和协作：在团队开发环境中，语义化的HTML让代码更具可读性，新加入的开发者可以更快地理解代码结构和目的，减少了沟通成本。此外，当需要修改或扩展功能时，清晰的语义化标签使得定位和操作相关代码变得更加直接和高效。

  • 有利于响应式设计和未来兼容性：随着Web技术的发展，语义化的标签更易于被新的CSS和JavaScript特性支持，使得页面在不同设备和浏览器上的呈现更为一致。

  • 提升代码质量：鼓励开发者在设计之初就思考内容和结构的关系，而非仅关注外观，这有助于形成良好的编码习惯，减少无意义的嵌套，使代码更加整洁、高效。

总结

通过深入了解和应用微信UI库WEUI，开发者能够快速构建出与微信客户端设计风格和谐统一的界面，提升用户体验。实践中，采用BEM命名规范不仅有助于维持代码的组织性和可维护性，还促进了团队协作的效率。同时，坚持HTML语义化的使用，是确保网页对所有用户友好，包括残疾人士通过辅助技术访问，以及提升搜索引擎排名的关键策略。综上所述，结合WEUI的便利性、BEM的条理性，以及HTML语义化的深远考虑，开发者能够更加自信地创造出既符合现代审美，又具备高度实用性的微信应用界面，为用户带来流畅且愉快的使用体验。

avatar
文章
阅读
粉丝