BEM์ Block, Element, Modifer๋ก ๊ตฌ์ฑ๋ ํด๋์ค ์ด๋ฆ์ ์ง๋ CSS ๋ฐฉ๋ฒ๋ก ์ ๋๋ค.
BEM ๋ฐฉ๋ฒ๋ก ์ id์๋ ์ฌ์ฉํ ์ ์๊ณ ์ค์ง class๋ช ์๋ง ํ์ฉํ ์ ์์ต๋๋ค.
Block | Element | Modifier |
---|---|---|
์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ ๋ฆฝ์ ์ธ ๋ธ๋ก | ๋ธ๋ก์ ๊ตฌ์ฑํ๋ ์ข ์์ ์ธ ํ์ ์์ | ๋ธ๋ก ๋๋ ์์์ ๋ณํ (๋ชจ์, ์ํ, ๋์) |
-
์๋ฏธ๋ก ์ ํด๋์ค ์ ํ์ ์๋ช ๊ท์น
์ฝ์ด ์ฌ์ฉ ํผํ๊ธฐ
-
๋ค๋ฅธ ํ์์ ์ ํ์ ์ฌ์ฉ์ ์ ํ
--
,__
ํ์ ์ด์ธ์ ๋ค๋ฅธ ํ์์ ๊ธฐํธ ์ฌ์ฉ ์ ํ -
์ ์ญ์์ ์ ์ผํ ์ด๋ฆ ๊ถ์ฅ
-
๋ฎ์ ์ ํ์ ํน์ด์ฑ ์ ์ง
-
HTML/CSS ์ฐ๊ฒฐ์ด ๋์จ, ๋ณ๋ ฌ ๊ฐ๋ฐ ๊ฐ๋ฅ
-
์๋ฏธ๋ฅผ ํ์ ํ ์ ์๋ ์๋ช
.cnt {...} .uw {...} .sa {...}
-
์ ์ญ ๊ณต๊ฐ์ ์ ์ ํ ํํ ์ด๋ฆ
.top {...} .content {...} .button {...}
id | class, [attr], :class | type, ::element |
---|---|---|
0 | 0 | 0 |
CSS ์ ํ์ | ์ฐ์ ์์ |
---|---|
a | 0, 0, 1 โ 001 |
.a | 0, 1, 0 โ 010 |
#a | 1, 0, 0 โ 100 |
#a a | 1, 0, 1, โ 101 |
#a.a a | 1, 1, 1 โ 111 |
#a#b[href]::before | 2, 1, 1 โ 211 |
์๋์ ๊ทธ๋ํ๋ cssstats.com
์์ ์ ๊ณตํ๋ ์น ์ฌ์ดํธ ์ ํ์ ์ฌ์ฉ ํํฉ ๋ถ์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ฌ ๋ ์น ์ฌ์ดํธ๋ฅผ ๋ถ์ํ ๊ฒ์
๋๋ค.
ํ๊ท ์ ํ์ ์ ์: 58์
์ต๋ ์ ์: 410์
ํ๊ท ์ ํ์ ์ ์: 14์
์ต๋ ์ ์: 101์
์ ํ์ ์ ์๋ ๋ฎ๊ฒ ์ ์งํ๊ณ 020 ์์ค์ผ๋ก ์ ์งํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์์ ์ฌ์ดํธ๋ค์ ๋น๊ตํด๋ณด๋ฉด B ์ฌ์ดํธ๊ฐ A ์ฌ์ดํธ๋ณด๋ค ๋ ๊ด๋ฆฌ๊ฐ ์ ๋๊ณ ์๋ ์ฌ์ดํธ๋ก ๋ณผ ์ ์์ต๋๋ค.
CSS ์ ํ์ ๋ถ์ ๊ทธ๋ํ๋ ๋ฎ๊ณ ํํํ๊ฒ ์ข์ต๋๋ค.
- | A ์ฌ์ดํธ | B ์ฌ์ดํธ |
---|---|---|
Max score | 410 | 101 |
CSS ์ ํ์ | #a #b #c #d .f {...} | #a p {...} |
๐ cssstats ๋ฐ๋ก๊ฐ๊ธฐ Click ! ๐
์คํ์ผ์ํธ์ ๋ํ ๋ถ์ ๋ฐ ์๊ฐํ๋ฅผ ์ ๊ณตํ๋ ์น ์ฌ์ดํธ
์ ์ฐฝ ์ด๊ธฐ ๋ฐฉ๋ฒ : CTRL+click (on Windows and Linux) | CMD+click (on MacOS)
๊ธฐํธ | ์๋ฏธ |
---|---|
__ |
ํ์ ์์๋ฅผ ์๋ฏธ |
-- |
์ํ ๋ณํ์ ์๋ฏธ |
ํ๋์ ์ด๋ฆ์ ์์, ๋ณํ์ ๊ฐ ํ ๋ฒ๋ง ํ์ฉํฉ๋๋ค.
.block {...}
.block__element {...}
.block__element--modifier {...}
.block--modifier {...}
์ด ํ์ ์ด์ธ์ ๋ค๋ฅธ ํ์์ ํ์ฉํ์ง ์์ต๋๋ค.
// ๋จ์ ๋ธ๋ก
<button class="btn" />
// ์์ ๋ฐ ๋ณํ ์ถ๊ฐ
<em class="info__label info__label--warning" />
// ์๋ชป๋ ์ฌ์ฉ
<button class="btn--submit" />
// ์ฌ๋ฐ๋ฅธ ์ฌ์ฉ
<button class="btn btn--submit" />
'๋ณํ' ํด๋์ค ๋จ๋ ์ฌ์ฉ ๋ถ๊ฐ, ํญ์ ๋ธ๋ก ๋๋ ์์์ ํจ๊ป ์ฌ์ฉ
<div class=โcardโ>
<img class=โcard__imageโ>
<h2 class=โcard__titleโ>I am a card</h2>
<p class=โcard__descriptionโ>I am the card paragraph</p>
<!-- The button is an element inside the block -->
<a class=โcard__buttonโ>Learn more</a>
</div>
์ํฐํจํด(anti-pattern) ์ ๋นํจ์จ์ ์ด๊ฑฐ๋ ๋น์์ฐ์ ์ธ ํจํด์ ์๋ฏธํฉ๋๋ค.
-
์๋ชป๋ ์ฌ์ฉ
.photo {...} // ํน์ด์ฑ 10 .photo img {...} // ํน์ด์ฑ 11 .photo figcaption {...} // ํน์ด์ฑ 11
'์ ํ์ ํน์ด์ฑ'์ด ๋์์ง๋ ์ค์ฒฉ ๊ตฌ์กฐ, ํ์ ์ ํ์๋ 'BEM'์์ ์ํฐ ํจํด์ผ๋ก ๊ฐ์ฃผํฉ๋๋ค.
๊ทธ๋ฌ๋ฏ๋ก ํ์ ์ ํ์๋ ๊ฐ๊ธ์ ํผํ๋๊ฒ ์ข์ต๋๋ค.
-
์ฌ๋ฐ๋ฅธ ์ฌ์ฉ
.photo {...} // ํน์ด์ฑ 10 .photo__img {...} // ํน์ด์ฑ 10 .photo__figcaption {...} // ํน์ด์ฑ 10
์ ์ดํ๋ ค๋ ๋ชจ๋ ์์์ ํด๋์ค ์ด๋ฆ์ ๋ถ์ฌํ์ฌ ํน์ด์ฑ์ ๊ด๋ฆฌํฉ๋๋ค.
-
์๋ชป๋ ์ฌ์ฉ
.__elem {...} .--modi {...} .block__elem1__elem2 {...} .block--modi1--modi2 {...}
๋ธ๋ก/์์ ์ด๋ฆ ์๋ต, ์์/๋ณํ ์ด๋ฆ ์ค๋ณต์ ๊ธ์งํฉ๋๋ค.
ํ๊ธฐ๋ฒ |
---|
PascalCase |
camelCase |
kebab-case |
snake_case |
์ด๋ฆ ๊ณต๊ฐ์ ์ํ ์ ๋์ด ์ฌ์ฉ์ ์ถ์ฒํฉ๋๋ค.
.lzModal {...}
.lzModal__title {...}
.lzBtn {...}
.lzBtn--small {...}
์ ๋์ด๋ฅผ ์ฌ์ฉํ์ฌ์ผ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ณต์กด์ด ๊ฐ๋ฅํ๋ค.
์๋ฅผ ๋ค์ด ์ ๋์ด ์์ด .btn์ ์ฌ์ฉํ๊ฒ ๋ ๊ฒฝ์ฐ bootstrap ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ค์ฒฉ๋ ์ ์๋ค.
- ์๋ฏธ๋ก ์๋ช ๋ฒ์ผ๋ก ์ฝ๊ณ ์ดํดํ๊ธฐ ์ฝ๋ค.
- ์์ํ ์ด๋ฆ์ ์ฝ์ด๋ฅผ ์ฌ์ฉํ์ง ์๋๋ค.
- ํน์ด์ฑ์ '020' ๋ณด๋ค ์๊ฒ ์ ์งํ๋ค.
- ์ ํ์ ์ด๋ฆ์ ์ ์ญ ๊ณต๊ฐ์์ ์ ์ผํ๋ค.
- HTML/CSS ๋ณ๋ ฌ ๊ฐ๋ฐ์ด ๊ฐ๋ฅํ๋ค.
์ ์ฐฝ ์ด๊ธฐ ๋ฐฉ๋ฒ : CTRL+click (on Windows and Linux) | CMD+click (on MacOS)