[CSS] BEM - CSS : 재정의 레벨

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다.

 

BEM - CSS : 재정의 레벨

 

---

BEM 원칙을 CSS에 적용하면 블록을 다른 레벨로 분리할 수 있습니다.

• 이전 블록을 상속 및 확장하여 보존하면서 다른 재정의 레벨에서 블록에 대한 새로운 외형을 구현할 수 있습니다
• 블록의 외형을 완전히 재정의할 수 있습니다
• 새로운 블록을 추가할 수 있습니다

재정의 레벨을 사용하여 범용 CSS 블록 라이브러리를 생성하고, 프로젝트 수준에서 변경할 수 있습니다. 그런 다음 어쎔블리(assembly) 사용하여 원하는 블록 표현만 프로젝트에 포함시킬 수 있습니다.

common.blocks/
    button/
        button.css    # Basic CSS implementation of a button

desktop.blocks/
    button/
        button.css    # Button specifics for desktop

mobile.blocks/
    button/
        button.css    # Button specifics for mobile

빌드 하는 동안 desktop.css 파일은 common 레벨에서 버튼에 대한 모든 기본 규칙을 가져온 후 dsktop 레벨에서 재정의하는 규칙을 가져옵니다.

@import "common.blocks/button/button.css";    /* Basic CSS rules */
@import "desktop.blocks/button/button.css";   /* Specifics for desktop */

mobile.css 파일은 common 레벨에서 버튼에 대한 기본 규칙을 가져온 후 mobile 레벨에서 재정의하는 규칙을 가져옵니다.

@import "common.blocks/button/button.css";    /* Basic CSS rules */
@import "mobile.blocks/button/button.css";    /* Specifics for mobile */

button 블록의 표현을 레벨별로 구분하면 아래와 같은 장점이 있습니다.

• 블록의 외형을 완전히 재정의할 수 있습니다

desktop.blocks/button/button.css

    .button {
        font-family: Arial, sans-serif;
        font-size: 11px;
        line-height: 24px;
        background: #fff;
    }

desktop.blocks/button/button.css

.button {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 28px;
    background: yellow;
}

• 다른 재정의 레벨에서 블록 의 외형을 추가하거나 부분적으로 변경할 수 있습니다

common.blocks/button/button.css

.button {
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 24px;
    background: #fff;
}

mobile.blocks/button/button.css

.button {
    background: #fff;
    color: rgb(255, 0, 0);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

BEM-style CSS로 작업하기

-   DOM 모델은 제쳐두고 블록을 작성하는 방법을 배웁니다
-   ID선택자나 tag 선택자를 사용하지 않습니다
-   중첩 선택자의 수를 최소화합니다
-   CSS 클래스 명명 규칙을 사용하여 선택자 이름의 충돌을 방지하고 최대한 유용하고 명확하게 지정합니다
-   블록, 엘리먼트, 모디파이어 단위로 작업합니다
-   변경 가능성이 있는 경우 블록의 CSS 속성을 모디파이어로 작성합니다
-   mix를 사용합니다
-   개별 블록을 쉽게 재사용할 수 있도록 코드를 작은 독립된 단위로 나눕니다
-   블록을 재사용합니다

기존 프로젝트에 BEM 적용하기

-   BEM 방법론을 사용하여 새 컴포넌트를 작성하고 필요에 따라 기존 컴포넌트를 변경합니다
-   블록을 설계할때 위에서 설명한 원칙을 따릅니다
-   이전 코드와 새 코드를 구분하려면 CSS 클래스명에 접두사를 사용하세요
-   프로젝트에서 BEM 원칙을 구현하려면 아래 원칙을 따라야합니다.