养成大佬习惯，我们也可以是“腾讯中人”

牛马先生
332 阅读4分钟

当大家还在为自己设计的各种div盒子取名字，想要在让其他人看的明白的同时，又不能太随意雷同而绞尽脑汁的时候(元素间不关联，每个取独立的名字)，有的人已经学起了微信生态CSS开发的思维，利用WEUI组件库的做法来实现自己的页面设计。

对WEUI的认识

WeUI 一款由腾讯微信团队开发的UI组件库，是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web开发量身设计，这是专门被设计用来构建在微信运行的 H5 / 小程序等一系列应用上，所以这也是一款移动端的 UI 组件库。相信很多开发者都知道，WeUI发布已经多年，发展至今，是一个成熟稳定、体验优雅的组件库。

WeUI 组件预览

看到这张图片，我们可以发现排版整洁，很有规律。WeUI 提供了一套现成的组件，如按钮、表单、列表和对话框等，针对移动使用进行了优化，并遵循微信的视觉风格，这些组件在我们使用微信的过程随处可见，用户也非常熟悉。

可是像这样许多类似的标签，它们的样式不尽相同却又很相似，难不成取类名时也要设计出不同的名字吗，这显然很让人头大，所以这里就得学会微信开发时的命名习惯，让自己也潜移默化地向大佬靠齐。

关于BEM

BEM，全称为Block（块）、Element（元素）、Modifier（修饰符），是一种前端开发中的CSS命名和架构方法论。它特别适用于大型项目和团队协作的场景中，旨在提高代码的可读性、可维护性和可重用性。其实像我们这样自己做一些小demo时也可以使用一样的的命名规范，既可以极大的帮助我们解决找单词命名的烦恼，也能让我们的习惯变得更好。

  1. Block（块） ：代表一个独立的、可重用的组件，具有明确的目的和语义，是用户界面中可识别的一部分，比如导航栏（nav）、页眉（header）等。
  2. Element（元素） ：是块的一部分，没有独立的意义，只有在所属的块的上下文中才有意义。例如，导航栏中的一个菜单项（nav__item），其中“nav__”表示它属于“nav”这个块。
  3. Modifier（修饰符） ：用于描述块或元素的不同状态或变体。它们可以改变块或元素的外观或行为，通过附加特定的类名来实现，如一个被激活的按钮（button--active）。修饰符可以应用于块（block--modifier）或元素（block__element--modifier）。

🥇小demo实操✨

这里我将给出一个简化的示例，模拟QQ音乐的一个歌曲列表区域的HTML和CSS代码，遵循BEM命名规范。

image.png
思路详解：

  • Block: .music-list 代表整个歌曲列表区域。

  • Elements:

    • .music-list__title 表示列表的标题。
    • .music-list__items 是包含所有歌曲项的无序列表。
    • .music-list__item 是歌曲列表中的每一项。
    • .music-list__number, .music-list__link, .music-list__artist 分别代表歌曲编号、歌曲链接和歌手名。

  • Modifier：

    • .music-list__like类，表示歌曲列表项中的“喜欢”按钮。
    • 使用Modifier来表示按钮的不同状态：
        • .music-list__like--neutral 作为初始或“不喜欢”状态，颜色设置为灰色。
        • .music-list__like--liked 用来表示用户已经点击“喜欢”。

这样经过自己的实际开发才能知道BEM到底有多顶。下面是完整代码，大家也可以自己着手尝试，一定会有所收获的！

🥈HTML完整代码：🎨
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qq音乐小demo</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="music-list">
        <h2 class="music-list__title">热门歌曲</h2>
        <ul class="music-list__items">
          <li class="music-list__item">
            <span class="music-list__number">1</span>
            <a href="#" class="music-list__link">樱花草</a>
            <span class="music-list__artist">王小草</span>
            <button class="music-list__like music-list__like_liked">喜欢</button>
          </li>
          <li class="music-list__item">
            <span class="music-list__number">2</span>
            <a href="#" class="music-list__link">指纹</a>
            <span class="music-list__artist">杜宣达</span>
            <button class="music-list__like music-list__like_liked">喜欢</button>
          </li>
          <li class="music-list__item">
            <span class="music-list__number">3</span>
            <a href="#" class="music-list__link">牛仔很忙</a>
            <span class="music-list__artist">周杰伦</span>
            <button class="music-list__like music-list__like_liked">喜欢</button>
          </li>
          
        </ul>
      </div>
</body>
</html>
🥉CSS完整代码：🎨
/*Block*/
.music-list {
    margin: 20px;
  }

/*Elements*/
.music-list__title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}

.music-list__items {
list-style-type: none;
padding: 0;
}

.music-list__item {
display: flex;
align-items: center;
margin-bottom: 5px;
}

.music-list__number {
width: 50px;
text-align: right;
margin-right: 10px;
color: #999;
}

.music-list__link {
flex-grow: 1;
text-decoration: none;
color: #007bff;
}

.music-list__link:hover {
text-decoration: underline;
}

.music-list__artist {
color: #666;
}

/*Modifier*/
.music-list__like {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    margin-left: 10px;
  }
  
  .music-list__like_liked {
    color: red;
  }
  
  .music-list__like_neutral {
    color: #666;
  }
  
  .music-list__like:hover {
    text-decoration: underline;
  }
avatar
文章
阅读
粉丝