《深入WEUI上传组件：BEM规范与Stylus的完美实践》

3Katrina
100 阅读4分钟

前言

最近作者对WEUI组件库很感兴趣，于是就去学习了部分源码，本文作者通过模拟一个上传文件的组件，来讲解WEUI中的优雅的命名规范

模拟移动端截图

image.png


按理来讲，我们需要创建一个react或者vue框架，在.jsx或.vue中书写这个组件并且导出，这种方式是十分正确的，但是本文由于就只会写一个组件，而且着重讲解的是html和css，所以本文就用html+css文件来替代用组件完成上传文件页面的制作。

上传页面制作过程

1.创建文件基本目录

image.png

首先咱们创建一个文件夹，里面存放对应的css和html，其中样式的书写我们使用stylus实现，所以放在.styl的文件之中，之前作者也介绍过Stylus，这是大型项目中常用的技术，大家可以去阅读这篇文章：Stylus：更高效、更强大的CSS预处理器详细了解这个强大的工具。


2.html结构

我们首先在index.html中，创建整个项目的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WEUI uploader 源码学习</title>
  <link rel="stylesheet" href="./common.css">
</head>
<body>
  <div class="page">
    <header class="page__hd">
      <h1 class="page__title">Uploader</h1>
      <p class="page__desc">
        上传组件，支持图片上传、文件上传、视频上传等
      </p>
    </header>
    <main class="page__bd">
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_uploader">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <p class="weui-uploader__title">图片上传</p>
                <div class="weui-uploader__info">
                  <span>0</span> /
                  <span>2</span>
                </div>
              </div>
              <div class="weui-uploader__bd">
                <ul class="weui-uploader__files">
                  <li class="weui-uploader__file">
                  </li>
                  <li class="weui-uploader__file">
                  </li>
                  <li class="weui-uploader__file">
                  </li>
                  <li class="weui-uploader__file">
                  </li>
                  <li class="weui-uploader__file">
                  </li>
                  <li class="weui-uploader__file">
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
</html>

可以看到，在写html部分时，我们严格使用了BEM命名规范：

  1. Block（块）级别：

    • page - 整个页面容器块
    • weui-cells - 单元格容器块
    • weui-cell - 单个单元格块
    • weui-uploader - 上传组件块

  2. Element（元素）级别：

    • page__hd - page块的头部元素（__表示元素）
    • page__bd - page块的主体元素
    • page__title - page块的标题元素
    • weui-cell__bd - weui-cell块的主体元素
    • weui-uploader__hd - 上传组件的头部元素
    • weui-uploader__bd - 上传组件的主体元素
    • weui-uploader__title - 上传组件的标题元素
    • weui-uploader__info - 上传组件的信息元素
    • weui-uploader__files - 上传组件的文件列表元素
    • weui-uploader__file - 上传组件的单个文件元素

  3. Modifier（修饰符）级别：

    • weui-cells_form - 表单样式的单元格容器（_表示修饰符）
    • weui-cell_uploader - 上传样式的单元格

BEM的优点：

  1. 类名语义明确，一看就知道是什么组件及其部分
  2. 避免样式冲突，因为类名有层级关系
  3. 便于团队协作和维护
  4. 结构清晰，容易扩展

这种命名方式在WEUI这样的UI框架中很常见，有助于保持代码的一致性和可维护性。


css部分

接下来，我们为页面的元素都加上样式，我们在common.styl文件中书写css部分

$weui-bg-0 = #ededed
$weui-fg-1 = rgba(0,0,0,0.55)
$weui-bg-2 = #fff
$weui-fg-2 = gray
$weui-fg-3 = rgba(0,0,0,0.1)


*
  margin 0
  padding 0

.page
  position absolute
  top 0
  bottom 0
  left 0
  right 0
  background-color: $weui-bg-0
  overflow: scroll
  -webkit-overflow-scrolling: touch
  box-sizing border-box
  z-index 1
  .page__hd
    padding: 40px
    .page__title 
      text-align: left
      font-size 20px
      font-weight: 400
    .page__desc
      margin-top 4px
      color: $weui-fg-1
      text-align:  left
      font-size 14px

.weui-cells
  margin-top 8px
  background-color: $weui-bg-2
  position relative
  overflow hidden
  &::before
    content: ""
    position absolute
    left 0
    right 0
    height 1px
    background-color  $weui-fg-3
    z-index 2

.weui-cell
  padding 16px
  display flex
  align-items: center
  line-height 1.41176471

.weui-cell__bd
    flex 1
    
.weui-cell_uploader
  padding-bottom: 24px

.weui-uploader
  .weui-uploader__hd
    display: flex
    padding-bottom: 12px
    align-items: center
    .weui-uploader__title
        flex: 1 
    .weui-uploader__info
        color: $weui-fg-2

.weui-uploader__bd
  .weui-uploader__files
    list-style: none
    .weui-uploader__file
      float left
      margin-right 8px
      margin-bottom 8px
      width 96px
      height 96px
      background url(https://weui.io/images/pic_160.png) no-repeat 50%
      background-size cover

可以看到，使用sylus的.styl文件书写css有很多好处

  • 便利化：我们在.styl，无需书写{}以及:了，.styl的书写格式很轻便，只需要使用缩进即可完成对不同元素的样式的实现。

  • 工程化：我们在.styl文件的初始创建了一些变量，后文的部分属性可以使用这些变量，实现了变量统一管理，在以后我们需要更改这些属性时，我们不需要逐个在css中修改，只需要更改前面的变量即可。

  • 模块化：相比于传统的.css，对于像.weui-uploader .weui-uploader__hd这种嵌套结构，我们不需要写两个rule（选择器＋申明块）了，只需要按照这种缩进的书写格式，方便地实现嵌套的样式，这样做可以让我们统一管理weui-uploader里面的元素，实现模块化

结尾

通过这次对WEUI上传组件的源码学习，我们不仅掌握了如何用BEM规范构建清晰的HTML结构，也体验了Stylus在CSS编写中的高效与优雅。这种组合不仅让代码更易维护，也极大提升了开发效率。大厂的前端实践告诉我们，良好的命名规范和现代化的CSS预处理器是打造高质量UI组件的基础。希望本文的分享能帮助你在日常开发中写出更专业、更可维护的代码。如果你对WEUI其他组件也感兴趣，欢迎持续关注我的源码解析系列。

avatar
文章
阅读
粉丝