CSS BEM 명명 규칙: 정의, 왜 중요한지, 어떻게 사용하나요?-CSS 튜토리얼-php.cn

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

DDD

풀어 주다： 2024-09-18 12:21:02

원래의

711명이 탐색했습니다.

CSS BEM Naming Convention: What It Is, Why It Matters, and How to Use It?

깨끗하고 체계적인 CSS를 작성하는 것은 특히 대규모 프로젝트의 경우 중요합니다. CSS를 구성하는 가장 좋은 방법 중 하나는 BEM 명명 규칙을 사용하는 것입니다. 이 글에서는 BEM이 무엇인지, 왜 중요한지, 장단점을 설명하고 두 가지 예를 통해 BEM 사용 방법을 보여드리겠습니다.

BEM이란 무엇입니까?

BEM은 Block, Element, Modifier의 약자입니다. 코드를 더 쉽게 이해하고 유지 관리할 수 있도록 CSS 클래스 이름을 작성하기 위한 명명 시스템입니다. BEM의 주요 목표는 개발자가 재사용 가능하고 모듈식이며 확장 가능한 CSS를 작성하도록 돕는 것입니다.

1. 블록: 그 자체로 의미가 있는 독립형 구성 요소(예: 버튼 또는 양식).
2. 요소: 그 자체로는 의미가 없으며 블록에 종속되는 블록의 일부(예: 버튼 아이콘).
3. 수정자: 블록이나 요소의 다른 버전(예: 다른 색상의 버튼).

.block {}
.block__element {}
.block--modifier {}

로그인 후 복사

왜 BEM을 사용하는가?

BEM을 사용하면 지저분하고 혼란스러운 CSS를 피할 수 있습니다. 여러 가지 이점이 있습니다:

일관성: 모든 클래스 이름은 동일한 패턴을 따르므로 코드를 더 쉽게 예측하고 이해할 수 있습니다.
재사용성: 블록과 요소는 프로젝트의 다양한 부분에서 재사용할 수 있습니다.
간편한 유지 관리: 다른 개발자가 쉽게 코드를 읽고 수정할 수 있습니다.
충돌 방지: BEM은 서로 다른 구성 요소 간의 CSS 충돌을 방지하는 데 도움이 됩니다.

BEM 사용 방법: 예

예 1: 간단한 버튼

기본 버튼 블록부터 시작하여 BEM이 어떻게 작동하는지 살펴보겠습니다.

HTML:

<button class="button button--primary">
  Submit
</button>

로그인 후 복사

CSS:

.button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
}

.button--primary {
  background-color: blue;
}

로그인 후 복사

설명:

버튼은 메인 버튼 스타일을 나타내는 블록입니다.
버튼--기본은 이 특정 버튼 버전에 파란색 배경을 적용하는 수정자입니다.

예 2: 카드 구성 요소

이제 제목과 설명(요소), 작은 크기 버전(수정자)이 포함된 카드 블록을 만들어 보겠습니다.

HTML:

<div class="card card--small">
  <h2 class="card__title">Title</h2>
  <p class="card__description">This is a description.</p>
</div>

로그인 후 복사

CSS:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

로그인 후 복사

설명:

카드는 카드 구성요소를 나타내는 블록입니다.
카드__제목 및 카드__설명은 카드의 특정 부분인 요소입니다.
카드--소형은 작은 버전의 카드에 대한 패딩을 줄이는 수정자입니다.

BEM의 장점과 단점

장점:

1. 정리적 및 일관성: CSS를 깔끔하고 체계적으로 유지하는 데 도움이 됩니다.
2. CSS 충돌 방지: 한 구성 요소의 스타일이 다른 구성 요소에 영향을 미칠 위험을 줄입니다.
3. 재사용성: 블록과 요소는 프로젝트 전체의 여러 위치에서 사용될 수 있습니다.
4. 간편한 유지 관리: 프로젝트가 성장하더라도 CSS를 더 쉽게 업데이트하고 관리할 수 있습니다.

단점:

1. 긴 클래스 이름: BEM 클래스 이름은 꽤 길어서 처음에는 부담스러워 보일 수 있습니다.
2. 학습 곡선: 특히 CSS를 처음 접하는 경우 BEM 구조에 익숙해지는 데 시간이 걸립니다.

BEM이 중요한 이유는 무엇입니까?

BEM은 깔끔하고 확장 가능한 코드를 장려하기 때문에 인기 있는 CSS 방법론입니다. 대규모 프로젝트에서는 CSS를 관리하기가 금방 어려워질 수 있습니다. BEM을 사용하면 각 클래스 이름이 고유하고 설명적이므로 각 클래스의 목적을 더 쉽게 이해할 수 있습니다. 또한 스타일 충돌과 같은 문제를 방지하고 개발자 간의 협업을 더욱 원활하게 만듭니다.

일관되고 모듈화된 CSS 작성 방식을 원한다면 BEM이 탁월한 선택입니다. 배우는 데 시간이 좀 걸릴 수 있지만 장기적으로는 시간을 절약하고 CSS를 만들 수 있습니다. 유지 관리가 더 용이합니다.

결론

BEM 명명 규칙은 CSS를 체계적이고 확장 가능하게 유지하는 좋은 방법입니다. 이는 충돌을 방지하고, 코드를 보다 쉽게 유지 관리하며, 재사용 가능한 구성 요소를 촉진하는 데 도움이 됩니다. 긴 수업 이름과 학습 곡선으로 인해 처음에는 어려워 보일 수 있지만 장점은 단점보다 훨씬 큽니다. 더욱 깔끔한 CSS를 작성하고 프로젝트 공동 작업을 개선하고 싶다면 BEM을 사용해 보세요!