오늘은 BEM에 대하여 공부했다.
BEM이란, Block, Element, Modifier methodology의 약자로, HTML & CSS에서 이름을 작성할 때 사용하는 방식이다.
block__element--modifier 와 같은 방식으로 작성한다.
아래는 예제이다.
/* Block component */
.card {}
/* Element that depends upon the block */
.card__btn {}
/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}
예를 들면, card라는 block 단위의 컴포넌트가 존재하고, card 안에는 img, button, p 등의 elements가 존재한다.
또, button의 종류가 여러개 있으며, 색상과 크기가 다르다고 가정할때, 위와 같은 방식으로 표기할 수 있다.
BAM은 현존하는 html/css 네이밍 방식 중에 가장 깔끔하고 단순한 방식이여서, 많은 사람들이 이 방식을 사용하고 추천한다고 한다.
추가로 공부해볼만한 사이트를 아래 공유한다.
BEM — Block Element Modifier
Introduction On smaller brochure sites, how you organize your styles isn’t usually a big concern. You get in there, write some CSS, or maybe even some SASS. You compile it all into a single stylesheet with SASS’s production settings, and then you aggre
getbem.com
BEM 101 | CSS-Tricks
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 we
css-tricks.com
10 Common Problems And How To Avoid Them
Battling BEM CSS: 10 Common Problems And How To Avoid Them — Smashing Magazine
Whether you’ve just discovered BEM or are an old hand (in web terms anyway!), you probably appreciate what a useful methodology it is. If you don’t know what BEM is, I suggest you read about it on the BEM website before continuing with this post, becau
www.smashingmagazine.com
'TIL(today i learned)' 카테고리의 다른 글
| [css] advanced tricks (0) | 2022.04.30 |
|---|---|
| [project] 포트폴리오 웹사이트 markup (0) | 2022.04.29 |
| [HTML/CSS] css variable과 html data- attribute (0) | 2022.04.26 |
| [JS] web APIs (0) | 2022.04.25 |
| [JS] API 개념, async vs defer (0) | 2022.04.25 |