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

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

1. BEM이란 무엇입니까?

BEM은 다음을 의미합니다:

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

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

BEM 명명 규칙:

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

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

2. 구조 정의

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

예:

    

        
Home
        
About
        
Contact
    

이 예에서는:

• 블록: .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:

    

        
Card Title
    
    

        
This is a simple card component.
    
    

        Read More
    

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를 체계화하고 예측 가능하며 확장 가능하게 유지하는 강력한 방법입니다. 구성 요소를 블록, 요소 및 수정자로 분할하면 더 깔끔한 코드를 유지하고 스타일 충돌을 방지하여 프로젝트 개발을 더 빠르고 효율적으로 만들 수 있습니다. 성장합니다.

링크드인에서 나를 팔로우하세요

리도이 하산