block__element_modifier๋ชจ๋ ๊ธฐ๋ฐ์ ๋ฐฉ๋ฒ๋ก (+mix)

๊ณต์ ๋ฌธ์(https://en.bem.info)์์๋ BEM์ ์ด๋ ๊ฒ ์ค๋ช ํ๋ค.
BEM(Block, Element, Modifier)๋ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ์ ๊ทผ ๋ฐฉ์์ด๋ค. ๊ธฐ๋ณธ ์์ด๋์ด๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค(UI)๋ฅผ ๋ ๋ฆฝ๋ ๋ธ๋ก์ผ๋ก ๋๋๋ ๊ฒ์ด๋ค. ์ด๋ฅผ ํตํด ๋ณต์กํ UI๋ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐํ ์ ์์ผ๋ฉฐ, ๊ธฐ์กด ์ฝ๋๋ฅผ ์ฌ์ฌ์ฉํ ์ ์๋ ์ฅ์ ์ด ์๋ค.
BEM์ ๋ชจ๋์ Block, Element, Modifier ๋จ์๋ก ๋ถํดํ๋ฉฐ, ๊ฐ ์ ๊ธ์๋ฅผ ๋ฐ์ BEM์ผ๋ก ๋ถ๋ฅธ๋ค. BEM์ ๋ฌ์์ Yandex์ฌ์์ ๊ฐ๋ฐํ ๋ฐฉ๋ฒ๋ก ์ผ๋ก ์ค์ ๋ก ์ด ๋ฐฉ๋ฒ์ ๊ธฐ๋ฐํ CSS ์ค๊ณ ๊ธฐ๋ฒ์ด ๋๋ฆฌ ์ฌ์ฉ๋๊ณ ์์ง๋ง BEM์ CSS์๋ง ๊ตญํ๋์ง๋ ์๋๋ค.
๊ทธ๋ ๋ค๋ฉด BEM์ ๊ณตํต ๊ท์น๊ณผ ๋ชจ๋์ ๊ฐ๋ณ ๊ท์น์ ์์๋ณด์.
CSS style์ ์ํ BEM ๊ณตํต ๊ท์น
– ID ์
๋ ํฐ์ ํ๊ทธ ์
๋ ํฐ๋ฅผ ์ฌ์ฉํ์ง ์๋๋ค.
– ๋ค์คํ
๋ ์
๋ ํฐ ์ฌ์ฉ์ ์ต์ํํ๋ค.
– CSS ํด๋์ค ๋ค์ด๋ฐ ์ปจ๋ฒค์
์ ์ฌ์ฉํ์ฌ ์ด๋ฆ ์ถฉ๋์ ํผํ๊ณ ์
๋ ํฐ์ ๋ชฉ์ ์ ๋ช
ํํ๊ฒ ํ๋ค.
– Blocks, Elements, Modifiers๋ฅผ ๊ตฌ๋ถํ์ฌ ์ฌ์ฉํ๋ค.
– Blocks๋ฅผ ์ฌ์ฌ์ฉํ๋ค.
BEM์ ๋ค์ด๋ฐ ๊ท์น
๋ชจ๋ ์๋ฌธ์๋ฅผ ์ฌ์ฉํ๋ฉฐ, ๋ ๋จ์ด๋ ํ์ดํ(-)์ผ๋ก ์ฐ๊ฒฐํ๋ค.
Block | – | block, block-two |
Element | block ์ด๋ฆ์ ์์๋ฐ์ ์ธ๋์ค์ฝ์ด ๋ ๊ฐ(__)๋ก ์ฐ๊ฒฐ | block__element, block-two__element-two |
Modifier | Block/Element ์ด๋ฆ ์์๋ฐ์ ์ธ๋์ค์ฝ์ด ํ๋(_)๋ก ์ฐ๊ฒฐ. ํค-๊ฐ ์์ ์ค๋ค์ดํฌ ์ผ์ด์ค(_)๋ฅผ ์ฌ์ฉ. | block_modifier, block__element_modifier, element_key_value |
Modifier (MindBEMding) | Block/Element ์ด๋ฆ ์์๋ฐ์ ํ์ดํ ๋๊ฐ(–)๋ก ์ฐ๊ฒฐ. ํค-๊ฐ์์ ํค๋ ์๋ต๊ฐ๋ฅ. | block–modifier, element–value |
๋ชจ๋์ ๊ฐ๋ณ ๊ท์น
๋ ผ๋ฆฌ์ , ๊ธฐ๋ฅ์ ์ผ๋ก ๋ ๋ฆฝ๋์ด ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๋ชจ๋๋ก ์ ์ํ๋ค. ํด๋์ค ์ด๋ฆ์ ‘ํํ’๊ฐ ์๋๋ผ ‘๋ชฉ์ , ์ฉ๋’๋ฅผ ๋ํ๋ด์ผ ํ๋ค.
EX) head, logo, menu (O)
blue-button, small-title (X)
block์ ๋ค๋ฅธ block ๋ด๋ถ์์๋ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, modifier๋ฅผ ํตํด ์์น๋ ๋ชจ์์ ๋ณ๊ฒฝํ ์ ์๋ค.

๊ทธ๋ฆผ – block์ ์ค์ฒฉ(์ถ์ฒ: en.bem.info)
Element
block์ ๊ตฌ์ฑํ๋ฉฐ block ๋ด๋ถ์์๋ง ์ฌ์ฉํ๋ ๋ชจ๋๋ก ์ ์ํ๋ค. ์๋ฅผ ๋ค์ด menu__item์ menu๋ผ๋ block์ ๊ตฌ์ฑํ๋ฉฐ menu ๋ฐ์์๋ ์ฌ์ฉํ ์ ์์ผ๋ฏ๋ก element๊ฐ ๋๋ค.

๊ทธ๋ฆผ – block์ ๊ตฌ์ฑํ๋ element(์ถ์ฒ:en.bem.info)
element ํด๋์ค ์ด๋ฆ๋ block๊ณผ ๋์ผํ๊ฒ ‘ํํ’๊ฐ ์๋๋ผ ‘์ฉ๋’๋ฅผ ๋ํ๋ด์ผ ํ๋ค.
element๋ ์ ํ์ ์์์ด๋ฏ๋ก ์ฌ์ฉํ์ง ์์๋ ์๊ด์์ง๋ง element ์ด๋ฆ์ ์ค์ฒฉํ์ฌ ์ฌ์ฉํ์ง ์๋๋ค.
EX) block__element__element, menu__button__icon (X)
Modifier
block/element์ ๋ชจ์์ด๋ ๋์์ ์ ์ํ๋ ๋ชจ๋์ด๋ค.
modifier๋ ์ ํ์ ์์์ด๋ฏ๋ก ์ฌ์ฉํ์ง ์์๋ ์๊ด์์ง๋ง ๋จ๋
์ผ๋ก๋ ์ฌ์ฉํ ์ ์๊ณ block/element์ ํจ๊ป ์ฌ์ฉํด์ผ ํ๋ค.
๊ฐ์ block์ด๋ผ๋ modifier์ ๋ฐ๋ผ ๋ชจ์์ด ๋ณํ ์ ์์ผ๋ฉฐ, modifier๋ ๋ฐํ์์ด๋ block์ ๋ฐ๋ผ ๋ฐ๋ ์ ์๋ค.
modifier ํด๋์ค ์ด๋ฆ์ ํํ(ํฌ๊ธฐ, ์, ์ํ, ๋์)์ ๋ํ๋ด์ผ ํ๋ค. ํํ๋ก ๋๋๋ฉด boolean, key-value ๋ ๊ฐ์ง๊ฐ ์์ผ๋ฉฐ, ๊ฐ๊ฐ์ ์๋ ๋ค์๊ณผ ๊ฐ๋ค.
– boolean : ex) active, disabled
– key-value : ex) color_red, line_doubled (์ค๋ค์ดํฌ ์ผ์ด์ค๋ก ํํ)
modifier์ ์๋ ์ ํ์ด ์์ผ๋ฏ๋ก ์ฌ๋ฌ ๊ฐ๋ฅผ ๋ถ์ผ ์ ์์ง๋ง ๋์ผํ ์คํ์ผ์ ์ค๋ณตํ์ง ์๋๋ค.
MIX
mix๋ ํ๋์ ์์์ ์ญํ ์ด ๋ค๋ฅธ ์ฌ๋ฌ ํด๋์ค๋ฅผ ์ฌ์ฉํ๋ ๊ธฐ๋ฒ์ด๋ค.
์ฅ์ ์ ์ฝ๋๋ฅผ ๋ณต์ฌํ์ง ์๊ณ ๊ธฐ์กด์ ์คํ์ผ๊ณผ ์กฐํฉํด์ ์๋ก์ด ๋ชจ๋๋ก ์ฌ์ฉํ ์ ์๋ค.
block+element, block+block, element+element ๋ฑ์ mix๋ฅผ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ์ํ ์ฝ๋๋ฅผ ํตํด ํ์ธํ ์ ์๋ค.
<!-- HTML --> <div class="header"> <div class="logo header__logo"></div> </div> /* CSS */ .logo { width:100px; height:50px; } .header__logo { margin: 12px; }
๋ค๋ฅธ ์์์ ๊ด๊ณ๋ ๋ ์ด์์๊ณผ ๊ด๋ จ๋ ๋ถ๋ถ์ mix, block ๋ด๋ถ์ ๋ฌธ์ ๋ modifier๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
mix๋ ๋
๋ฆฝ์ฑ๊ณผ ์ฌ์ฌ์ฉ์ฑ์ด ๋์ ์ํ๋ฅผ ์ ์งํ๋ ์ฅ์ ์ด ์๋ค.
์ฐธ๊ณ
– https://en.bem.info
– ๋ค์ํ ์์ ๋ก ๋ฐฐ์ฐ๋ CSS ์ค๊ณ ์ค์ ๊ฐ์ด๋