CSS ๋ฐฉ๋ฒ•๋ก (CSS methodologies)

BEM,OOCSS๋ฅผ ์•Œ์•„๋ณด์ž

์›น์˜ ๋ฐœ์ „์œผ๋กœ ์ธํ•ด CSS์˜ ์—ญํ• ๋„ ์ปค์ ธ๊ฐ”๊ณ  ๋ณต์žกํ•œ ์„ค๊ณ„์˜ ํ•„์š”์„ฑ ์กฐ์ฐจ ํ•„์š”์—†์—ˆ๋˜ CSS์—๋„ ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•๋ก ์ด ์ƒ๊ธฐ๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฐฉ๋ฒ•๋ก ๋“ค์€ ๋ชจ๋‘ ๊ฐ™์€ ์ง€ํ–ฅ์ ์„ ๊ฐ–๋Š”๋‹ค.

  • ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ
  • ์œ ์ง€๋ณด์ˆ˜์˜ ์šฉ์ด์„ฑ
  • ํ™•์žฅ ๊ฐ€๋Šฅ์„ฑ
  • ํด๋ž˜์Šค ๋„ค์ž„๋งŒ์œผ๋กœ ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ์˜ ์—ญํ•  ์˜ˆ์ธก

๋Œ€ํ‘œ์ ์ธ ๋ฐฉ๋ฒ•๋ก ์ธ BEM์™€ OOCSS์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

๐Ÿง BEM(Block,Element,Modifier)์€?


  • Block, Element, Modifier์˜ ์•ฝ์ž์ด๋‹ค.
  • OOP์™€ ์œ ์‚ฌํ•˜๋‹ค.
  • ID๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ณ , class๋ช…๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ex) block__elementโ€“modifier

์ž‘๋ช…๊ทœ์น™

BLOCK

๋ฌธ๋‹จ ์ „์ฒด์— ์ ์šฉ๋œ element ๋˜๋Š” element๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ์ปจํ…Œ์ด๋„ˆ๋ฅผ ๋งํ•œ๋‹ค.

<header class="header">
    <div class="something"></div>
    <div class="something"></div>
</header>

Element

  • element๋Š” block ์•ˆ์—์„œ ํŠน์ • ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์ด๋‹ค. element๋Š” ์–ธ๋”์Šค์ฝ”์–ด( _ ) ๋‘๊ฐœ๋กœ block๊ณผ ์—ฐ๊ฒฐํ•˜์—ฌ ํ‘œ๊ธฐํ•œ๋‹ค.
  • block๊ณผ element์˜ ์ด๋ฆ„์ด ๊ธธ ๊ฒฝ์šฐ ํ•˜์ดํ”ˆ( - )์œผ๋กœ ์—ฐ๊ฒฐํ•œ๋‹ค.
.header__logo { ... };
.header__nav { ... };
.header__menu { ... };

.header__something-menu { ... };
.header__something-btn { ... };

Modifier

  • Modifier์€ block ๋˜๋Š” element์˜ ์†์„ฑ์ด๋‹ค.
  • ์ด ์†์„ฑ์€ element์˜ ์™ธ๊ด€์ด๋‚˜ ์ƒํƒœ๋ฅผ ๋ณ€ํ™”์‹œํ‚จ๋‹ค.
  • element์™€ ํ•˜์ดํ”ˆ( - ) ๋‘๊ฐœ๋กœ ์—ฐ๊ฒฐํ•˜์—ฌ ํ‘œ๊ธฐํ•œ๋‹ค.
.nav__menu { ... };
.nav__menu--secondary { ... };

BEM์€ ํด๋ž˜์Šค๋ช…๋งŒ์œผ๋กœ๋„ ๊ตฌ์กฐ๋ฅผ ์œ ์ถ”ํ•  ์ˆ˜ ์žˆ๊ณ , ๊ฐ„๋‹จํ•œ ์ž‘๋ช…๊ทœ์น™์ด๋‹ค. ํ™•์‹คํ•œ ์•ฝ์†์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ˜‘์—…๊ฐ„์—๋„ ์œ ์šฉํ•˜๊ฒŒ ์“ฐ์ผ ์ˆ˜ ์žˆ๋‹ค. ๋‹จ์ ์€ ํด๋ž˜์Šค๋ช…์ด ๊ฝค ๊ธธ์–ด์ง€๊ณ , ๊ดด์ดํ•ด์ง€๊ธฐ ๋•Œ๋ฌธ์— ์ฒ˜์Œ ์ ‘ํ•œ์‚ฌ๋žŒ์€ ๊ฑฐ๋ถ€๊ฐ์ด ๋“ค ์ˆ˜ ์žˆ๋‹ค.

BEM with ryan

BEM with ryan of kakao

๐Ÿง OOCSS(Object Oriedted CSS)๋Š”?


  • Nicole Sullivan์— ์˜ํ•ด ๊ฐœ๋ฐœ๋œ ํ”„๋ ˆ์ž„์›Œํฌ
  • CSS๋ฅผ ๋ชจ๋“ˆ ๋ฐฉ์‹์œผ๋กœ ์ฝ”๋”ฉํ•˜์—ฌ ์ค‘๋ณต์„ ์ตœ์†Œํ™”ํ•˜๋Š” ๊ธฐ๋ฒ•
  • ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ ์ฆ๊ฐ€
  • ์ž์†์„ ํƒ์ž์˜ ์‚ฌ์šฉ์„ ์ง€์–‘ํ•œ๋‹ค.
  • ๊ตฌ์กฐ์™€ ์™ธ์–‘์„ ๋ถ„๋ฆฌ
.btn {
  ...
}
.popup {
  ...
}

.red{
  background-color:red;
  color:#fff;
}
๊ตฌ์กฐ์™€ ์™ธ์–‘์˜ ๋ถ„๋ฆฌ ์˜ˆ์ œ

์ž‘๋ช… ๊ทœ์น™

  • ๊ฐ„๊ฒฐํ•จ : ์งง๊ฒŒ
  • ๋ช…๋ฃŒํ•จ : ์Šคํƒ€์ผ๊ณผ ์ž‘๋™ ๋ฐฉ์‹์ด ๊ณ ์Šค๋ž€ํžˆ ๋“œ๋Ÿฌ๋‚˜๊ฒŒ
  • ๋ถ„๋ช…ํ•œ ๋ง๋œป : ์–ด๋–ป๊ฒŒ ์ƒ๊ฒผ๋Š”์ง€ ๋ณด๋‹ค, ์–ด๋–ค ๋ชจ๋“ˆ์ธ์ง€

์˜ˆ์ œ

.facebookbtn{
  width:100px;
  height:50px;
  color:#fff;
  border-radius:4px;
  background-color:#000;
}

.instabtn{
  width:100px;
  height:50px;
  color:#fff;
  border-radius:4px;
  background-color:#777;
}
์ค‘๋ณต์Šคํƒ€์ผ ์ œ๊ฑฐ ์ „


.btn{
  width:100px;
  height:50px;
  color:#fff;
  border-radius:4px;
}
.facebookbtn{
  background-color:#000;
}
.instabtn{
  background-color:#777;
}
์ค‘๋ณต์Šคํƒ€์ผ ์ œ๊ฑฐ ํ›„


BEM? OOCSS? or OTHERS?

๋ณธ๋ฌธ์— ์–ธ๊ธ‰ํ•˜์ง€ ์•Š์€ ๋‹ค๋ฅธ ๋ฉ‹์ง„ ๋ฐฉ๋ฒ•๋ก ๋“ค๊ณผ BEM,OOCSS์ค‘์— ๋ฌด์—‡์„ ์„ ํƒํ•ด์•ผ ํ• ์ง€๋Š” ๊ทœ๋ชจ์™€ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๊ฒ ์ง€๋งŒ ํ•„์ž์˜ ๊ฒฝ์šฐ BEM๊ณผ OOCSS ๋ฅผ ํ˜ผ์šฉ ํ•˜๊ณ  ์žˆ๋‹ค. ๊ฑฐ๊ธฐ์— ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ์ข€ ๋” ๊ฐ•๋ ฅํ•œ ํž˜์„ ๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

Thanks to

์ฐธ๊ณ  : ์žฌํฌ jaiyah - BEM(Block Element Modifier) ๋ฐฉ๋ฒ•๋ก 

์ฐธ๊ณ  : Jeongmin - [CSS๋ฐฉ๋ฒ•๋ก ] SMACSS, BEM, OOCSS


ยฉ 2019. All rights reserved.