透過實際範例掌握 CSS BEM 命名：純 HTML、Angular 和 Next.js-css教學-PHP中文網

CSS BEM 命名約定：它是什麼、為什麼重要、如何使用它？

Ahmet Erkan Paşahan ・ 9 月 14 日

首頁

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 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;
}

登入後複製

說明：