透過實際範例掌握 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中文網其他相關文章！