집 > 기사 > 웹 프론트엔드 > CSS BEM 명명 규칙은 무엇입니까? BEM 명명 규칙 요약(상세)

CSS BEM 명명 규칙은 무엇입니까? BEM 명명 규칙 요약(상세)

不言원래의: 2018-07-27 17:04:074299검색

BEM은 block, element, modifier의 약어이며 매우 유용한 명명 규칙입니다. 그러면 프런트 엔드 코드를 더 쉽게 이해하고 더 엄격하게 만들 수 있습니다. 다음으로 구체적인 bem 명명 규칙을 살펴보겠습니다.

1 BEM 명명 규칙이란 무엇입니까?

Bem은 블록, 요소 및 수정자의 약어로서 제안된 프런트 엔드 CSS 명명 방법론입니다. Yandex 팀이 제공합니다.

BEM은 간단하고 매우 유용한 명명 규칙입니다. 프런트엔드 코드를 더 쉽게 읽고 이해하고, 더 쉽게 공동 작업하고, 더 쉽게 제어하고, 더 강력하고 명확하고 더 엄격하게 만드세요.

1.1 BEM 명명 패턴

BEM 명명 규칙 패턴은 다음과 같습니다.

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

#🎜 🎜#

block은 더 높은 수준의 추상화 또는 구성 요소를 나타냅니다.
block__element는 .block의 자손을 나타내며 전체적으로 완전한 .block을 형성하는 데 사용됩니다.
block--수정자는 .block의 다양한 상태 또는 버전을 나타냅니다.

두 개의 하이픈과 하나 대신 밑줄을 사용하면 자체 블록을 단일 하이픈으로 구분할 수 있습니다. 예:

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

1.2 BEM 명명법의 이점

BEM 핵심은 더 많은 설명과 더 명확한 구조를 얻을 수 있고, 이름에서 특정 마크의 의미를 알 수 있다는 것입니다. 따라서 HTML 코드의 class 속성을 보면 요소 간의 관계를 알 수 있습니다.

기존 명명법 예:

<p class="article">
    <p class="body">
        <button class="button-primary"></button>
        <button class="button-success"></button>
    </p>
</p>

이 작성 방법은 DOM 구조 및 클래스 이름 지정에서 사용할 수 있습니다. 각 요소의 의미를 이해하지만 실제 계층 관계를 명확히 할 수는 없습니다. CSS를 정의할 때 계층적 선택기를 사용하여 제약 조건 범위를 제한하여 구성 요소 간 스타일 오염을 방지해야 합니다.

BEM 명명 방법을 사용한 예:

<p class="article">
    <p class="article__body">
        <p class="tag"></p>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </p>
</p>

BEM 명명 방법을 통해 모듈 계층 관계 간단합니다. CSS를 작성할 때 계층적 선택을 너무 많이 할 필요가 없습니다.

2 BEM 명명법을 사용하는 방법

2.1 BEM 형식을 사용해야 하는 경우 # 🎜🎜#BEM을 사용하는 요령은 BEM 형식으로 언제, 무엇을 작성해야 하는지 알아야 한다는 것입니다.

모든 곳에서 BEM 이름을 사용해야 하는 것은 아닙니다. 명시적인 모듈 관계가 필요할 때 BEM 형식을 사용해야 합니다.

예를 들어, 단지 공개 단일 스타일인 경우 BEM 형식을 사용해도 의미가 없습니다.

.hide {
    display: none !important;
}

2.2 CSS 전처리기에서 BEM 형식 사용하기

BEM의 한 가지 단점은 이름 지정 방법이 길고 보기 흉하며 글이 우아하지 않다는 것입니다. BEM 형식이 가져오는 편리함에 비해 객관적으로 살펴봐야 합니다.

게다가 CSS는 일반적으로 LESS/SASS와 같은 전처리기 언어를 사용하여 작성되며, 해당 언어 기능을 사용하여 작성하는 것이 훨씬 간단합니다.

LESS를 예로 들어보세요:

.article {
    max-width: 1200px;

    &__body {
        padding: 20px;
    }

    &__button {
        padding: 5px 8px;

        &--primary {background: blue;}
        &--success {background: green;}
    }
}

2.3 널리 사용되는 프레임워크의 구성 요소에 사용됩니다. BEM 형식

Vue.js / React / Angular와 같은 현재 널리 사용되는 프런트 엔드 프레임워크에는 CSS 구성 요소 수준 범위의 컴파일 구현이 있으며 기본 원칙은 CSS 속성 선택기 기능을 사용하여 다양한 구성 요소에 대해 다양한 속성 선택기를 생성하는 것입니다.

이 로컬 범위 작성 방법을 선택하면 더 작은 구성 요소에서는 BEM 형식이 그다지 중요해 보이지 않을 수 있습니다. 그러나 공개 및 전역 모듈 스타일 정의의 경우 여전히 BEM 형식을 사용하는 것이 좋습니다.

또한 외부에 공개된 공용 구성 요소의 경우 일반적으로 스타일 사용자 정의를 위해 이 로컬 범위 메서드는 구성 요소 스타일을 정의하는 데 사용되지 않습니다. 여기서 BEM 형식을 사용하는 것도 유용합니다.

2.4 .block__el1__el2 형식을 피하세요.

깊게 중첩된 DOM 구조에서는 지나치게 긴 스타일 이름 정의를 피해야 합니다.

3 요약

BEM에서 가장 어려운 부분 중 하나는 범위의 시작과 끝, 그리고 언제 사용할지 여부를 파악하는 것입니다. 그것을 사용하기 위해. 지속적인 사용 경험이 쌓이면 점차 사용법을 알게 될 것이며 이러한 문제는 더 이상 문제가 되지 않을 것입니다. 좋은 기술이나 나쁜 기술은 없으며 올바른 기술만이 최고입니다.

CSS BEM 명명 규칙은 무엇입니까? BEM 명명 규칙 요약(상세)

관련 기사