実践的な例で CSS BEM 命名をマスターする: Pure HTML、Angular、Next.js

前の記事では、CSS の BEM 命名規則 の基本と、それがクリーンでスケーラブルなコードを維持するために重要である理由について説明しました。

CSS BEM 命名規則: CSS BEM の名前付け規則: 概要、重要な理由、および使用方法

アフメット・エルカン・パシャハン ・ 9月14日

#css #ベム #html ＃プログラミング

今回は、実際の例を使用してさらに深く掘り下げ、さまざまな環境 (Pure HTML、Angular、、Next.js) で BEM がどのように機能するかを確認します。

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 は、それぞれアバター、名前、ステータスを表す user-card ブロックの要素です。
• BEM を使用すると、どのスタイルがブロックに適用されるか、またどのスタイルがユーザーのステータスに基づいて変化するかが明確になります。

例 2: Angular での BEM の適用

この Angular の例では、クリックすると読み込み状態を表示するインタラクティブなボタンを作成します。これは、ユーザーの操作や API 呼び出しに基づいてボタンの状態が変化する、フォームやインタラクティブな要素での頻繁な使用例です。

Angular コンポーネント (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] ディレクティブは、ボタンを動的に追加します (ボタンが読み込み状態の場合は読み込み、デフォルト状態の場合はボタンをプライマリ)。
• ボタンのテキストは 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 命名をマスターする: Pure HTML、Angular、Next.jsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。