CSS BEM 모델 – 확장 가능하고 유지 관리 가능한 CSS 작성 가이드

CSS BEM 모델 – 확장 가능하고 유지 관리 가능한 CSS 작성 가이드

이 글에서는 대규모 프로젝트를 위한 깔끔하고 구조적이며 유지 관리 가능한 CSS를 작성하는 데 도움이 되는 인기 있는 CSS 명명 규칙인 BEM(Block, Element, Modifier) 방법론에 대해 자세히 알아봅니다. BEM은 프로젝트가 성장함에 따라 코드의 확장성을 유지하고 스타일 충돌 가능성을 줄입니다.

1. BEM이란 무엇인가요?

BEM은 다음을 의미합니다.

• 블록: 버튼, 메뉴, 양식 등 그 자체로 의미가 있는 독립형 엔터티
• 요소: 버튼 라벨이나 메뉴 항목과 같이 특정 기능을 수행하는 블록의 일부입니다.
• 수정자: 비활성화된 버튼이나 강조 표시된 메뉴 항목과 같은 블록이나 요소의 변형 또는 상태입니다.

BEM 방법론은 재사용 가능하고 예측 가능하며 유지 관리 가능한 CSS 코드 작성을 강조합니다.

BEM 명명 규칙:

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

• 블록: 메인 컨테이너를 나타냅니다.
• 요소: 블록 이름 뒤에 이중 밑줄(__)로 구분됩니다.
• 수정자: 블록 또는 요소 이름 뒤에 오고 이중 하이픈(--)으로 구분됩니다.

2. 구조 정의

예를 들어 BEM의 구조를 분석해 보겠습니다.

예:

<div class="menu">
    <ul class="menu__list">
        <li class="menu__item menu__item--active">Home</li>
        <li class="menu__item">About</li>
        <li class="menu__item">Contact</li>
    </ul>
</div>

이 예에서는:

• 블록: .menu는 탐색 메뉴를 나타내는 메인 블록입니다.
• 요소: .menu__list 및 .menu__item은 블록 내의 요소입니다.
• 수정자: .menu__item--active는 메뉴 항목의 활성 상태를 나타내는 수정자입니다.

3. BEM의 블록

블록은 독립적이고 재사용 가능한 구성 요소입니다. 스타일이 다른 요소의 영향을 받을 염려 없이 코드의 어느 위치에나 배치할 수 있는 독립적인 엔터티라고 생각하세요.

예:

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

여기서 .button은 버튼 구성 요소의 스타일을 정의하는 블록입니다. 웹사이트의 여러 부분에서 이 블록을 재사용할 수 있습니다.

4. BEM의 요소

요소는 독립형 의미가 없는 블록의 일부입니다. 블록에 묶여 블록과 관련된 기능을 수행하기 위해 존재합니다.

예:

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

여기:

• .button__icon은 .button 블록 내의 요소로, 버튼의 아이콘을 나타냅니다.
• .button__label은 버튼의 텍스트 라벨을 나타내는 또 다른 요소입니다.

5. BEM의 수정자

수정자는 블록이나 요소의 변형을 나타냅니다. 수정자는 버튼 색상을 변경하거나 요소를 더 크게 만드는 등 구성 요소의 모양이나 동작을 변경하는 데 사용됩니다.

예:

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

여기:

• .button--primary는 버튼의 배경색을 변경하는 수정자입니다.
• .button--large는 버튼의 크기를 늘리는 또 다른 수정자입니다.

수정자는 요소에도 적용할 수 있습니다.

.button__icon--small {
    width: 10px;
    height: 10px;
}

6. BEM 사용의 이점

• 확장성: BEM은 확장 가능하도록 설계되었으므로 구성요소가 많은 대규모 프로젝트에 이상적입니다.
• 재사용성: 블록은 독립적이며 프로젝트의 여러 부분에서 재사용할 수 있습니다.
• 유지관리성: BEM은 명확하고 일관된 이름 지정을 권장하여 프로젝트가 성장함에 따라 CSS를 더 쉽게 유지 관리할 수 있습니다.
• 예측성: 어떤 요소가 어떤 블록에 속하는지 쉽게 알 수 있고 수정자에 따른 변형을 이해할 수 있습니다.

7. BEM 실행

블록, 요소, 수정자를 포함하는 더 완전한 예를 살펴보겠습니다.

HTML:

<div class="card">
    <div class="card__header">
        <h2 class="card__title">Card Title</h2>
    </div>
    <div class="card__body">
        <p class="card__text">This is a simple card component.</p>
    </div>
    <div class="card__footer">
        <button class="button card__button card__button--primary">Read More</button>
    </div>
</div>

CSS:

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

이 예에서는:

• .card 是代表整个卡片组件的块。
• .card__header、.card__title、.card__body 和 .card__footer 是卡片块中的元素。
• .card__button--primary 是将主要样式应用于卡片内按钮的修饰符。

8. BEM 中要避免的常见错误

• 嵌套元素过多：避免深层嵌套元素，因为它可能导致不必要的长类名。
• 不必要的修饰符：仅当需要更改块或元素的外观或状态时才使用修饰符。
• 将 BEM 与其他命名约定相结合：在整个项目中坚持使用 BEM 以保持一致性。

结论

BEM 方法是保持 CSS 有序、可预测和可扩展的强大方法。通过将组件分解为块、元素和修饰符，您可以维护更清晰的代码并避免样式冲突，从而使您的项目开发更快、更高效成长。

---

在 LinkedIn 上关注我

里多伊·哈桑

위 내용은 CSS BEM 모델 – 확장 가능하고 유지 관리 가능한 CSS 작성 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!