실제 예제: 순수 HTML, Angular 및 Next.js를 통해 CSS BEM 이름 지정 마스터하기

이전 기사에서는 CSS의 BEM 명명 규칙의 기본 사항과 이것이 깔끔하고 확장 가능한 코드를 유지하는 데 중요한 이유를 살펴보았습니다.

CSS BEM 명명 규칙: 정의, 왜 중요한지, 어떻게 사용하나요?

Ahmet Erkan Paşahan ・ 9월 14일

#css #벰 #html #프로그램 작성

이번에는 순수 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는 각각 아바타, 이름 및 상태를 나타내는 사용자 카드 블록의 요소입니다.
• BEM을 사용하면 블록에 어떤 스타일이 적용되는지, 사용자 상태에 따라 어떤 스타일이 변경되는지가 명확해집니다.

예시 2: Angular에 BEM 적용

이 Angular 예에서는 클릭 시 로드 상태를 표시하는 대화형 버튼을 만들어 보겠습니다. 이는 사용자 상호 작용이나 API 호출에 따라 버튼 상태가 변경되는 양식이나 대화형 요소에서 자주 사용되는 사례입니다.

Angular 구성 요소(button.comComponent.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.comComponent.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.comComponent.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 예에서는 활성 페이지를 동적으로 강조 표시하는 탐색 메뉴를 만듭니다. 이는 현재 페이지가 탐색에 시각적으로 표시되어야 하는 웹 애플리케이션의 일반적인 시나리오입니다.

Next.js 구성 요소(구성 요소/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 사용에 대한 이해를 높이는 데 도움이 되기를 바랍니다. 웹 개발에 대한 더 많은 기사, 실용적인 팁, 통찰력에 관심이 있으시면 정기적인 업데이트를 위해 저를 팔로우하세요. 질문이나 피드백이 있으면 주저하지 말고 연락주세요. 연락해서 여러분의 의견을 듣고 싶습니다!

위 내용은 실제 예제: 순수 HTML, Angular 및 Next.js를 통해 CSS BEM 이름 지정 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!