BEM
이란 웹프로그래밍에서 개발, 디버깅, 유지보수를 위하여, CSS선택자의 이름을 가능한 한 명확하게 작명하는 것이 목표이다.
소문자, 숫자, 하이픈, 언더바 기호만을 사용한다.
3가지 개념을 알고 접근하도록 하자.
- 블록 (Block)
: 재사용할 수 있는 기능적으로 독립적인 페이지 구성요소. HTML에서 블록은 class속성으로 표시된다.
블록은 환경에 영향을 받지 않아야 한다.
ex) header, menu...
- 요소 (Element)
: 블록안에서 특정 기능을 담당하는 부분이다.
block__element 처럼 더블 언더바를 이용해서 붙여준다.
ex) menu__item, header__title
- 수식어 (Modifier)
: 블록이나 요소의 모양(color, size), 상태 (disabled, checked)를 정의한다.
block__element--modifier, block--modifier 형태로 더블 하이픈을 이용하여 사용한다.
수식어는 boolean타입 (form__button--disabled)
key-value타입 (form--color-red)
하이픈 1개로 표현
이렇게 BEM을 사용하면, 클래스명은 복잡해 질 수 있어도, 나중에 클래스명만 보더라도 이게 어떤 용도이고, 어떤 형태일지 그릴 수 있다는 장점이 있다.
그리고 BEM은 클래스명이 길게 이어지다 보니, 바로 css로 작성하는 것보다, sass나 less를 이용하는것이 효율적이다.
'개발 > Web Programming' 카테고리의 다른 글
| Chromium원정대 (0) | 2019.10.08 |
|---|---|
| ESlint 설정 (0) | 2019.10.04 |
| Pug 쓸때 TIP (0) | 2019.10.02 |
| FontAwesome 무로 CDN 링크 ! (0) | 2019.10.02 |
| express view engine바꾸기 (0) | 2019.10.02 |
