CSS BEM 모델 – 확장 가능하고 유지 관리 가능한 CSS 작성 가이드-CSS 튜토리얼-php.cn

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

Linda Hamilton

풀어 주다： 2024-09-28 06:16:29

원래의

771명이 탐색했습니다.

CSS BEM Model – A Guide to Writing Scalable and Maintainable 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;
}

로그인 후 복사

이 예에서는: