実践的な例で CSS BEM 命名をマスターする: Pure HTML、Angular、Next.js-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-09-18 21:15:11

オリジナル

786 人が閲覧しました

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

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

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

ログイン後にコピー

説明: