小白秒变老手？带你看看页面结构都有哪些套路

PW
144 阅读4分钟

如果你的类命名太随意，面试官一眼就能看出来你是个新手，这个时候你就需要你一套命名方法来去去身上的“萌新味”。

BEM国际命名规范

BEM（Block Element Modifier）命名规范是一种用于前端开发的CSS类名命名方法论，旨在提高HTML和CSS代码的可读性、可维护性和可复用性。BEM由Yandex公司提出，已经被广泛应用于各种大型项目和框架中，如React、Angular以及许多其他前端技术栈。

BEM的核心概念

BEM命名规范主要围绕三个核心概念：Block、Element 和 Modifier。

  1. Block（块）

    • 定义：一个独立的功能模块，可以在页面上独立使用，也可以被其他模块引用。

    • 命名规则：通常使用小写字母和连字符（hyphen）来表示，例如 header、button、menu 等。

    • 示例：

      <div class="header"></div>

  2. Element（元素）

    • 定义：Block内的一个组成部分，依赖于所属的Block，不能独立存在于页面上。

    • 命名规则：在Block名称后加上两个下划线（double underscore），然后是Element的名称，例如 block__element。

    • 示例：

      <div class="header">
  <div class="header__logo"></div>
  <nav class="header__nav"></nav>
</div>

  3. Modifier（修饰符）

    • 定义：用于改变Block或Element的外观、状态或行为。

    • 命名规则：在Block或Element名称后加上一个下划线（single underscore），然后是Modifier的名称和值（如果有值的话），例如 block--modifier 或 block__element--modifier。

    • 示例：

      <div class="button button--primary"></div>
<div class="header__logo header__logo--small"></div>

BEM命名的好处

  1. 清晰的层级关系：通过明确的命名规则，可以很容易地看出各个组件之间的关系。
  2. 高可复用性：Block可以独立于具体的页面结构，方便在多个地方复用。
  3. 易于维护：当需要修改样式时，可以通过类名直接定位到对应的CSS规则，减少误改的风险。
  4. 团队协作：统一的命名规范有助于团队成员之间更好地理解和协作。

示例

假设我们要创建一个简单的导航栏，包含品牌标志和导航链接，可以使用BEM命名如下：

<nav class="navbar">
  <div class="navbar__brand">Brand Name</div>
  <ul class="navbar__menu">
    <li class="navbar__item"><a href="#" class="navbar__link navbar__link--active">Home</a></li>
    <li class="navbar__item"><a href="#" class="navbar__link">About</a></li>
    <li class="navbar__item"><a href="#" class="navbar__link">Contact</a></li>
  </ul>
</nav>

在这个例子中：

  • .navbar 是Block，表示整个导航栏。
  • .navbar__brand、.navbar__menu、.navbar__item 和 .navbar__link 都是Element，分别表示品牌标志、菜单、菜单项和链接。
  • .navbar__link--active 是Modifier，表示当前激活的链接。

在了解完BEM国际命名规范后，你要做的第一件事就是了解一下大厂程序员都是怎么做类命名的。

WEUI前端框架

WEUI是腾讯团队为微信Web开发设计的一套前端样式库，旨在帮助开发者快速实现与原生应用一致的视觉体验。它提供了丰富的基础控件，如按钮、对话框、表单等，能够满足大部分移动Web应用的需求。你可以在weui.io/ 中学习微信官方设计团队是如何设计他们的网页的。

微信图片_20241119131406.png

WeUI页面结构套路

在WEUI中，.weui-cells是一个Block，代表一组单元格；而.weui-cell__bd则是.weui-cells中的一个Element，用于包含单元格的主要内容。

使用WEUI构建页面时，可以遵循以下基本的页面结构模式：

<div class="page">
  <div class="page__hd">
    <!-- 页面头部 -->
    <h1 class="page__title">页面标题</h1>
    <p class="page__desc">页面描述信息</p>
  </div>
  <div class="page__bd">
    <!-- 页面主体 -->
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">标签</label></div>
        <div class="weui-cell__bd"><input class="weui-input" type="text" placeholder="输入框"></div>
      </div>
    </div>
  </div>
  <div class="page__ft">
    <!-- 页面底部 -->
    <a href="javascript:;" class="weui-btn weui-btn_primary">主要按钮</a>
  </div>
</div>

在这个例子中，.page作为整个页面的容器，包含了头部（.page__hd）、主体（.page__bd）和底部（.page__ft）三个部分。每个部分都按照BEM规范进行了清晰的命名，使得代码具有良好的可读性和可维护性。

注释

另外需要提醒的是，代码的注释也是区分小白和大佬的一大标志，养成良好的注释习惯也是十分重要的，比如：

 /*
 * @author djt
 * @date 2024-11-29
 */

在顶部注释作者和时间，能在提交后方便你的老板能第一时间看到(用你的代码惊艳老板，涨薪不是分分钟的事？)

R-C.png

avatar
文章
阅读
粉丝