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

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

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 src="profile.jpg" alt="User Avatar" class="user-card__avatar" />
  <div class="user-card__info">
    <h2 class="user-card__name">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" [ngClass]="{'button--loading': isLoading, 'button--primary': !isLoading}" (click)="handleClick()">
  <span *ngIf="!isLoading">{{ buttonText }}</span>
  <span *ngIf="isLoading">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 ${router.pathname === '/' ? 'nav__item--active' : ''}`}>
          <a href="/" className="nav__link">Home</a>
        </li>
        <li className={`nav__item ${router.pathname === '/about' ? 'nav__item--active' : ''}`}>
          <a href="/about" className="nav__link">About</a>
        </li>
        <li className={`nav__item ${router.pathname === '/contact' ? 'nav__item--active' : ''}`}>
          <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;
}

说明：

• Next.js 中的 useRouter 钩子用于获取当前路由（router.pathname）。
• nav__item--active修饰符根据当前页面是否与菜单项匹配动态应用。
• 通过更改文本颜色并将字体加粗来突出显示活动页面。
• nav__link 是 nav__item 块内的一个元素。

结论

在项目中使用 BEM 可以让您保持 CSS 的一致性和可扩展性，即使在处理动态组件和不断变化的状态时也是如此。通过利用 BEM 进行状态管理、动态类更改和条件样式化，您可以保持代码结构化、模块化且易于维护。

这些详细的示例强调了如何将 BEM 应用到实际应用程序中，从而更轻松地跨不同框架管理复杂的 UI 组件。

关注我了解更多更新！

我希望这篇文章能帮助您加深对在不同平台上使用 CSS BEM 的理解。如果您对更多文章、实用技巧和 Web 开发见解感兴趣，请务必关注我以获取定期更新。如果您有任何问题或反馈，请随时与我们联系 - 我很乐意与您联系并听取您的意见！

以上是通过实际示例掌握 CSS BEM 命名：纯 HTML、Angular 和 Next.js的详细内容。更多信息请关注PHP中文网其他相关文章！