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"]){ }