Frontend/CSS, HTML

[CSS]#7 BEM(Block Element Modifier)

blueprint-12 2021. 9. 29. 21:01

BEM 정의) The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS.

 

class 이름을 "status-bar__column" 으로 길게 작성한 이유는 css로 볼 때 이 칼럼이

어떤 것의 칼럼인지 헷갈리기 때문에 그렇다. column은 자주 쓰이기 때문에 단순히 column으로만

써놓으면 헷갈린다.  "status-bar__column" 부모__자식 관계가 어떻게 돼있는 지 보임

 

이렇게 클래스명을 지정하는 규칙을 BEM(Block Element Modifier)이라고 한다. 

참고 사이트 :https://css-tricks.com/bem-101/

 

BEM 101

The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff. Joe wanted to do a post about BEM, which

css-tricks.com

예시)

노란색-> BEM 적용

보라색 -> Not BEM 

원하는 표기법으로 쓰면 되지만 BEM을 쓰는 것을 추천

 

개인적으로 attribute selector을 써서 표기하는 게 좀 복잡하게 느껴졌음(보라색)

e.g.)input:not([type="password"]){ }

Attribute selectors MDN 링크