通过实际示例掌握 CSS BEM 命名：纯 HTML、Angular 和 Next.js-css教程-PHP中文网

首页

web前端

css教程

通过实际示例掌握 CSS BEM 命名：纯 HTML、Angular 和 Next.js

DDD

Sep 18, 2024 pm 09:15 PM

在上一篇文章中，我们探讨了 CSS 中 BEM 命名约定 的基础知识，以及为什么它对于维护干净且可扩展的代码至关重要。

Mastering CSS BEM naming with Practical Examples: Pure HTML, Angular, and Next.js

CSS BEM 命名约定：它是什么、为什么重要以及如何使用它？

Ahmet Erkan Paşahan ・ 9 月 14 日

#css #bem #html ＃编程

这一次，我们将通过实际示例更深入地了解 BEM 如何在不同环境中工作：纯 HTML、Angular、 和 Next.js。

BEM 不限于基本的 HTML 结构；它可以有效地应用于任何现代前端框架。读完本文后，您将更清楚地了解如何在各种开发设置中实现 BEM。

示例 1：在纯 HTML 中使用 BEM

在此示例中，我们将创建一个用户个人资料卡，该卡会根据用户的在线或离线状态动态更改其样式。这是现实应用程序中的常见用例，其中元素需要根据状态或条件进行更改。

HTML：

<div class="user-card user-card--offline">
  <img class="user-card__avatar lazy" src="/static/imghwm/default1.png" data-src="profile.jpg" alt="User Avatar">
  <div class="user-card__info">
    <h2 id="John-Doe">John Doe</h2>
    <p class="user-card__status">Offline</p>
  </div>
</div>

CSS：

.user-card {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #f5f5f5;
  max-width: 300px;
}

.user-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-card__info {
  display: flex;
  flex-direction: column;
}

.user-card__name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-card__status {
  font-size: 14px;
  color: #888;
}

.user-card--online {
  border-color: #4caf50;
  background-color: #e8f5e9;
}

.user-card--online .user-card__status {
  color: #4caf50;
}

.user-card--offline {
  border-color: #f44336;
  background-color: #ffebee;
}

.user-card--offline .user-card__status {
  color: #f44336;
}

说明：

用户卡是代表用户个人资料卡的块。
修饰符例如 user-card--online 和 user-card--offline 根据用户的状态更改卡片的外观。
user-card__avatar、user-card__name 和 user-card__status 是用户卡块的元素，分别表示头像、名称和状态。
BEM 的使用可以清楚地表明哪些样式适用于块以及哪些样式根据用户的状态而变化。

示例 2：在 Angular 中应用 BEM

在此 Angular 示例中，我们将创建一个交互式按钮，单击时显示加载状态。这是表单或交互元素中的常见用例，其中按钮的状态根据用户交互或 API 调用而变化。

角度组件 (button.component.html):

<button class="button" isloading>
  <span>{{ buttonText }}</span>
  <span>Loading...</span>
</button>

组件样式 (button.component.css):

.button {
  padding: 12px 24px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button--primary {
  background-color: #007BFF;
}

.button--loading {
  background-color: #666;
  cursor: not-allowed;
}

.button--loading span {
  font-size: 14px;
}

组件逻辑（button.component.ts）：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {
  @Input() buttonText: string = 'Submit';
  isLoading: boolean = false;

  handleClick() {
    this.isLoading = true;

    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  }
}

说明：

按钮块代表基本按钮。
[ngClass] 指令在按钮处于加载状态时动态添加button--loading，在默认状态时动态添加button--primary。
按钮的文本根据 isLoading 状态而变化。
handleClick 方法模拟加载状态，并在 2 秒后重置，代表典型的 API 调用场景。

示例 3：在 Next.js 中实现 BEM

在此 Next.js 示例中，我们将创建一个动态突出显示活动页面的导航菜单。这是 Web 应用程序中的常见场景，需要在导航中直观地指示当前页面。

Next.js 组件 (components/NavBar.js):

import { useRouter } from 'next/router';

export default function NavBar() {
  const router = useRouter();

  return (
    <nav classname="nav">
      <ul classname="nav__list">
        <li classname="{`nav__item" :>
          <a href="/" classname="nav__link">Home</a>
        </li>
        <li classname="{`nav__item" :>
          <a href="/about" classname="nav__link">About</a>
        </li>
        <li classname="{`nav__item" :>
          <a href="/contact" classname="nav__link">Contact</a>
        </li>
      </ul>
    </nav>
  );
}

Next.js 样式 (styles/NavBar.module.css):

.nav {
  background-color: #333;
  padding: 10px;
}

.nav__list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav__item {
  margin: 0;
}

.nav__link {
  color: white;
  text-decoration: none;
}

.nav__item--active .nav__link {
  font-weight: bold;
  color: #007BFF;
}

说明：