๋“ค์–ด๊ฐ€๋ฉฐ ๐Ÿ‘€

  • ์ด ๊ธ€์€ BEM Quick Start ๋ฅผ ์ฝ๊ณ  ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ๋ณต์Šตํ•˜๊ธฐ ์œ„ํ•ด ๋ฒˆ์—ญ์„ ํ–ˆ์œผ๋ฉฐ, ๋‚ด์šฉ์ด ์š”์•ฝ๋œ ๊ฒŒ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿถ BEM ์†Œ๊ฐœ

BEM์ด๋ž€ Block, Element, Modifier์˜ ์ฒซ ๊ธ€์ž๋งŒ ๊ฐ€์ ธ์™€ ์ด๋ฆ„ ์ง€์€ Component ๊ธฐ๋ฐ˜์˜ ์›น ๊ฐœ๋ฐœ ์ ‘๊ทผ๋ฒ• ์ค‘ ํ•˜๋‚˜ ์ž…๋‹ˆ๋‹ค.

์ด ๋ฐฉ๋ฒ•๋ก ์€ ์œ ์ € ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋…๋ฆฝ๋œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋ธ”๋ก์œผ๋กœ ๋ถ„๋ฆฌํ•˜์ž๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋ณต์žกํ•œ UI๋ฅผ ๊ฐ€์ง„ ํŽ˜์ด์ง€์˜ ์ธํ„ฐํŽ˜์ด์Šค ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ํ•˜๋ฉฐ, Copy and Paste ์—†์ด ์กด์žฌํ•˜๋Š” ์ฝ”๋“œ์˜ ์žฌํ™œ์šฉ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿฑ Block

๊ธฐ๋Šฅ์ ์œผ๋กœ ๋…๋ฆฝ๋œ ํŽ˜์ด์ง€์˜ Component๋Š” ์žฌ์‚ฌ์šฉ ๋  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. HTML์—์„œ ๋ธ”๋ก๋“ค์€ class ์†์„ฑ์œผ๋กœ ํ‘œํ˜„๋ฉ๋‹ˆ๋‹ค.

์•„๋ž˜๋Š” Block์˜ ํŠน์ง•๋“ค ์ž…๋‹ˆ๋‹ค.

  • ๋ธ”๋ก์˜ ์ด๋ฆ„์€ ๊ทธ ๋ธ”๋ก์˜ ๋ชฉ์ ์œผ๋กœ ๊ธฐ์ˆ ๋˜์–ด์•ผ ํ•˜๋ฉฐ, ๊ทธ ๋ธ”๋ก์˜ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

    • "์ด๊ฒƒ์ด ๋ฌด์—‡์ธ๊ฐ€?" - menu ๋˜๋Š” button โ‡’ โญ•๏ธ
    • "์ด๊ฒƒ์ด ๋ฌด์—‡์œผ๋กœ ๋ณด์ด๋Š”๊ฐ€?" - red ๋˜๋Š” big โ‡’ โŒ

        <!-- ์˜ˆ์‹œ -->
        <!-- ์˜ณ์€ ์˜ˆ, ์—๋Ÿฌ ๋ธ”๋ก์ด ์˜๋ฏธ์ƒ ์ ์ ˆ ํ•ฉ๋‹ˆ๋‹ค. -->
        <div class="error"></div>
      
        <!-- ํ‹€๋ฆฐ ์˜ˆ, ๋ธ”๋ก์€ ์–ด๋–ป๊ฒŒ ํ‘œํ˜„๋˜์–ด์ง€๋Š” ์ง€๋ฅผ ๋‚˜ํƒ€๋‚ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค. -->
        <div class="red-text"></div>
      
  • ๋ธ”๋ก์€ ์ž์‹ ์˜ ํ™˜๊ฒฝ์— ์˜ํ–ฅ์„ ๋ผ์น  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋‹น์‹ ์€ ๋ธ”๋ก์˜ positioning(top, left..)์ด๋‚˜ margin ๊ฐ’๊ณผ ๊ฐ™์€ ์™ธ๋ถ€ ๊ธฐํ•˜ํ•™์  ์š”์†Œ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

  • ๋‹น์‹ ์€ ๋˜ํ•œ BEM์„ ์‚ฌ์šฉํ•  ๋•Œ CSS ํƒœ๊ทธ๋‚˜ ID ์…€๋ ‰ํ„ฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ํŠน์ง•๋“ค์ด ๋ธ”๋ก์˜ ์žฌ์‚ฌ์šฉ์„ฑ์ด๋‚˜ ๋ธ”๋ก์ด ์›€์ง์ผ ๋•Œ ํ•„์š”ํ•œ ๋…๋ฆฝ์„ฑ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

๋ธ”๋ก ์‚ฌ์šฉ์„ ์œ„ํ•œ ๊ฐ€์ด๋“œ๋ผ์ธ

์ค‘์ฒฉ

  • ๋ธ”๋ก๋“ค์€ ์„œ๋กœ ์ค‘์ฒฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ค‘์ฒฉ์˜ ๋ ˆ๋ฒจ์€ ์–ผ๋งˆ๋“ ์ง€ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Example

    <!-- `header` block -->
    <header class="header">
        <!-- Nested `logo` block -->
        <div class="logo"></div>

        <!-- Nested `search-form` block -->
        <form class="search-form"></form>
    </header>

๐Ÿญ Element

๋ธ”๋ก์—์„œ ๋ถ„๋ฆฌ๋˜์–ด ์‚ฌ์šฉ๋  ์ˆ˜ ์—†๋Š” ํ•œ ๋ธ”๋ก์„ ์ด๋ฃจ๋Š” ๋ถ€๋ถ„ ์ž…๋‹ˆ๋‹ค.

์•„๋ž˜๋Š” Element์˜ ํŠน์ง•๋“ค ์ž…๋‹ˆ๋‹ค.

  • Element์˜ ์ด๋ฆ„์€ ๊ทธ Element์˜ ๋ชฉ์ ์œผ๋กœ ๊ธฐ์ˆ ๋˜์–ด์•ผ ํ•˜๋ฉฐ, ๊ทธ Element์˜ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
    • "์ด๊ฒƒ์ด ๋ฌด์—‡์ธ๊ฐ€?" - item ๋˜๋Š” text โ‡’ โญ•๏ธ
    • "์ด๊ฒƒ์ด ๋ฌด์—‡์œผ๋กœ ๋ณด์ด๋Š”๊ฐ€?" - red ๋˜๋Š” big โ‡’ โŒ
  • ํ•œ element์˜ ํ’€ ๋„ค์ž„ ๊ตฌ์กฐ๋Š” block-name__element-name ์ž…๋‹ˆ๋‹ค. element ์ด๋ฆ„์€ double underscore(__)๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ธ”๋ก ์ด๋ฆ„์œผ๋กœ๋ถ€ํ„ฐ ๋ถ„๋ฆฌ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
    <!-- Example -->
    <!-- `search-form` block -->
    <form class="search-form">
        <!-- `input` element in the `search-form` block -->
        <input class="search-form__input">

        <!-- `button` element in the `search-form` block -->
        <button class="search-form__button">Search</button>
    </form>

Element ์‚ฌ์šฉ์„ ์œ„ํ•œ ๊ฐ€์ด๋“œ๋ผ์ธ

์ค‘์ฒฉ

  • Element ๋“ค์€ ์„œ๋กœ ์ค‘์ฒฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ค‘์ฒฉ ๋ ˆ๋ฒจ์€ ์–ผ๋งˆ๋“ ์ง€ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ํ•œ element๋Š” ํ•ญ์ƒ ํ•œ ๋ธ”๋ก์˜ ๋ถ€๋ถ„์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ element์˜ ์ด๋ฆ„์ด ๊ณ„์ธต๊ตฌ์กฐ๋กœ ์„ ์–ธ ๋  ์ˆ˜ ์—†์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. (block__elem1__elem2)

Example

    <!--
        ์˜ณ์€ ์˜ˆ. element์˜ ์ด๋ฆ„ ๊ตฌ์กฐ๊ฐ€ ์•„๋ž˜์˜ ํŒจํ„ด์„ ๋”ฐ๋ฅด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
        `block-name__element-name`
    -->
    <form class="search-form">
        <div class="search-form__content">
            <input class="search-form__input">

            <button class="search-form__button">Search</button>
        </div>
    </form>

    <!--
        ํ‹€๋ฆฐ ์˜ˆ. element์˜ ์ด๋ฆ„ ๊ตฌ์กฐ๊ฐ€ ์•„๋ž˜์˜ ํŒจํ„ด์„ ๋”ฐ๋ฅด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
        `block-name__element-name`
    -->
    <form class="search-form">
        <div class="search-form__content">
            <!-- Recommended: `search-form__input` or `search-form__content-input` -->
            <input class="search-form__content__input">

            <!-- Recommended: `search-form__button` or `search-form__content-button` -->
            <button class="search-form__content__button">Search</button>
        </div>
    </form>

๋ธ”๋ก ์ด๋ฆ„์„ namespace๋กœ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ด namespace๋Š” element๋“ค์—๊ฒŒ block์— ์˜์กดํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค. (block__elem)

ํ•œ ๋ธ”๋ก์€ DOM tree์—์„œ ์—ฌ๋Ÿฌ ๊ฐœ๋กœ ์ค‘์ฒฉ๋œ element๋“ค์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Example

    <div class="block">
        <div class="block__elem1">
            <div class="block__elem2">
                <div class="block__elem3"></div>
            </div>
        </div>
    </div>

๊ทธ๋Ÿฌ๋‚˜, ์ด ๋ธ”๋ก ๊ตฌ์กฐ๋Š” BEM ๋ฐฉ๋ฒ•๋ก ์—์„œ element ๋“ค์˜ ๋ชฉ๋ก๋“ค๋กœ์„œ ํ‘œํ˜„๋˜์–ด ์ง‘๋‹ˆ๋‹ค.

Example

    .block {}
    .block__elem1 {}
    .block__elem2 {}
    .block__elem3 {}

์ด๊ฒƒ์€ ๊ฐ๊ฐ์˜ ๋ถ„๋ฆฌ๋œ element์— ๋Œ€ํ•ด ์ฝ”๋“œ์˜ ๋ณ€ํ™”์—†์ด ๋ธ”๋ก์˜ DOM ๊ตฌ์กฐ๋ฅผ ๋ณ€ํ™”์‹œํ‚ค๋Š” ๊ฒƒ์„ ํ—ˆ๋ฝํ•ฉ๋‹ˆ๋‹ค.

Example

    <div class="block">
        <div class="block__elem1">
            <div class="block__elem2"></div>
        </div>

        <div class="block__elem3"></div>
    </div>

๋ธ”๋ก ๊ตฌ์กฐ๊ฐ€ ๋ณ€ํ™”๋˜๋”๋ผ๋„ element๋“ค์˜ ๊ทœ์น™๊ณผ ๊ทธ๋“ค์˜ ์ด๋ฆ„์€ ๋˜‘๊ฐ™์ด ์œ ์ง€๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Membership

ํ•œ element๋Š” ํ•ญ์ƒ ํ•œ ๋ธ”๋ก์˜ ๋ถ€๋ถ„์ด์–ด์•ผ ํ•˜๋ฉฐ, ๋ธ”๋ก์œผ๋กœ๋ถ€ํ„ฐ ๋ถ„๋ฆฌ๋˜์–ด ์‚ฌ์šฉ๋  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

Example

    <!-- ์˜ณ์€ ์˜ˆ. element๋“ค์€ the `search-form` block ๋‚ด๋ถ€์— ์œ„์น˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. -->
    <!-- `search-form` block -->
    <form class="search-form">
        <!-- `input` element in the `search-form` block -->
        <input class="search-form__input">

        <!-- `button` element in the `search-form` block -->
        <button class="search-form__button">Search</button>
    </form>

    <!--
        ํ‹€๋ฆฐ ์˜ˆ. element๋“ค์ด the `search-form` block ์˜ ๋ฐ–์— ์œ„์น˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
    -->
    <!-- `search-form` block -->
    <form class="search-form">
    </form>

    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input">

    <!-- `button` element in the `search-form` block-->
    <button class="search-form__button">Search</button>

Optionality

element๋Š” block component์—์„œ ์„ ํƒ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค. ๋ชจ๋“  block ๋“ค์ด element๋ฅผ ๊ฐ€์ง€์ง„ ์•Š์Šต๋‹ˆ๋‹ค.

Example

    <!-- `search-form` block -->
    <div class="search-form">
        <!-- `input` block -->
        <input class="input">

        <!-- `button` block -->
        <button class="button">Search</button>
    </div>

Block ์ด๋‚˜ Element๋ฅผ ๋งŒ๋“ค์–ด ๋ณผ๊นŒ์š”?

Block ๋งŒ๋“ค๊ธฐ

๋งŒ์•ฝ ์ฝ”๋“œ์˜ ํ•œ ๋ถ€๋ถ„์ด ์žฌ์‚ฌ์šฉ ๋˜์–ด ์ง€๊ณ , ๊ทธ ๋ถ€๋ถ„์ด ๊ตฌํ˜„๋œ ๋‹ค๋ฅธ ํŽ˜์ด์ง€์˜ ์ปดํฌ๋„ŒํŠธ๋“ค์— ์˜์กดํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด Block์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Element ๋งŒ๋“ค๊ธฐ

์ฝ”๋“œ์˜ ํ•œ ๋ถ€๋ถ„์ด ๋ถ€๋ชจ entity(the block) ์—†์ด ๋ถ„๋ฆฌ๋˜์–ด ์‚ฌ์šฉ๋˜์–ด ์งˆ ์ˆ˜ ์—†๋‹ค๋ฉด element๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๊ฐ„์†Œํ™”ํ•œ ๊ฐœ๋ฐœ์„ ์œ„ํ•˜์—ฌ ์ž‘์€ ๋ถ€๋ถ„๋“ค๋กœ ๋ถ„๋ฆฌ๋˜์–ด์•ผ ํ•˜๋Š” element๋“ค์€ ์˜ˆ์™ธ์ž…๋‹ˆ๋‹ค. BEM ๋ฐฉ๋ฒ•๋ก ์—์„œ element ๋“ค์˜ element ๋“ค์€ ๋งŒ๋“ค ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด์™€ ๊ฐ™์€ ๊ฒฝ์šฐ, element๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ ๋Œ€์‹ ์— service ๋ธ”๋ก์„ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿฆ Modifier

block์ด๋‚˜ element์˜ ํ–‰๋™์ด๋‚˜ ์ƒํƒœ, ์™ธ์–‘์„ ์ •์˜ํ•˜๋Š” entity ์ž…๋‹ˆ๋‹ค.

์•„๋ž˜๋Š” Modifier์˜ ํŠน์ง•๋“ค ์ž…๋‹ˆ๋‹ค.

  • modifier ์ด๋ฆ„์€ ๊ทธ ์ž์‹ ์˜ ์™ธ์–‘์ด๋‚˜ ์ƒํƒœ, ํ–‰๋™์„ ๊ธฐ์ˆ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
    • "์‚ฌ์ด์ฆˆ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?" or "์–ด๋–ค ํ…Œ๋งˆ์ž…๋‹ˆ๊นŒ?" โ‡’ size_s or theme_islands
    • "์„œ๋กœ ์–ด๋–ป๊ฒŒ ๋‹ค๋ฅธ๊ฐ€์š”?" โ‡’ disabled or focused
    • "๊ทธ๊ฒƒ์€ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋‚˜์š”?" or "์œ ์ €์—๊ฒŒ ์–ด๋–ป๊ฒŒ ๋ฐ˜์‘ํ•˜๋‚˜์š”?" โ‡’ directions_left-top
  • modifier์˜ ์ด๋ฆ„์€ block์ด๋‚˜ element ์ด๋ฆ„์œผ๋กœ๋ถ€ํ„ฐ single underscore(_)๋กœ ๋ถ„๋ฆฌ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Types of modifiers

Boolean

  • modifier์˜ ์œ ๋ฌด๊ฐ€ ์ค‘์š”ํ•  ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๊ฐ’์ด ์ƒ๊ด€์—†์œผ๋ฉด disabled . ๋งŒ์•ฝ Boolean modifier๊ฐ€ ๋‚˜ํƒ€๋‚œ๋‹ค๋ฉด ๊ทธ ๊ฐ’์€ true ๋กœ ์ถ”์ธก๋˜์–ด ์งˆ ๊ฒ๋‹ˆ๋‹ค.
  • modifier์˜ ํ’€ ๋„ค์ž„ ๊ตฌ์กฐ๋Š” ์•„๋ž˜ ํŒจํ„ด์„ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.
    • block-name_modifier-name
    • block-name__element-name_modifier-name

Example

    <!-- The `search-form` block ์€ `focused` Boolean modifier๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค. -->
    <form class="search-form search-form_focused">
        <input class="search-form__input">

        <!-- The `button` element ๋Š” `disabled` Boolean modifier ๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.-->
        <button class="search-form__button search-form__button_disabled">Search</button>
    </form>

Key-value

  • modifier ๊ฐ’์ด ์ค‘์š”ํ•  ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, "islands ๋””์ž์ธ ํ…Œ๋งˆ๋ฅผ ๊ฐ€์ง„ ๋ฉ”๋‰ด" : menu_theme_islands
  • modifier์˜ ํ’€ ๋„ค์ž„ ๊ตฌ์กฐ๋Š” ์•„๋ž˜๋ฅผ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.
    • block-name_modifier-name_modifier-value
    • block-name__element-name_modifier-name_modifier-value

Example

    <!-- The `search-form` block ์€ the value `islands`๋ฅผ ๊ฐ€์ง„ `theme` modifier๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.   -->
    <form class="search-form search-form_theme_islands">
        <input class="search-form__input">

        <!-- The `button` element has the `size` modifier with the value `m` -->
        <button class="search-form__button search-form__button_size_m">Search</button>
    </form>

    <!-- two identical modifiers๋Š” different values ์ƒํ™ฉ์ ์œผ๋กœ ๊ฐ€์ง‘๋‹ˆ๋‹ค. -->
    <form class="search-form
                 search-form_theme_islands
                 search-form_theme_lite">

        <input class="search-form__input">

        <button class="search-form__button
                       search-form__button_size_s
                       search-form__button_size_m">
            Search
        </button>
    </form>

๐Ÿง Mix

๋‹จ์ผ DOM node์—์„œ ๋‹ค๋ฅธ BEM entity๋“ค์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ์ˆ 

์•„๋ž˜์™€ ๊ฐ™์ด ํ˜ผํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ํ–‰๋™๊ณผ ๋‹ค์ˆ˜์˜ entity๋“ค์„ ์ฝ”๋“œ์˜ ์ค‘์ฒฉ์—†์ด ๊ฒฐํ•ฉ
  • ์ด๋ฏธ ์กด์žฌํ•˜๋Š” UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ์˜๋ฏธ ์ƒ ์ƒˆ๋กœ์šด UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ

Example

    <!-- `header` block -->
    <div class="header">
        <!--
            `search-form` block ์€ the `header` block์˜ `search-form` element ์™€ 
                        ๊ฐ™์ด ์‚ฌ์šฉ๋˜์–ด ์ง‘๋‹ˆ๋‹ค.
        -->
        <div class="search-form header__search-form"></div>
    </div>

์œ„ ์˜ˆ์ œ์—์„œ ํ–‰๋™(behavior)๊ณผ search-form block์˜ ์Šคํƒ€์ผ๊ณผ header block ์˜ search-form element ์˜ ์Šคํƒ€์ผ์„ ๊ฒฐํ•ฉํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์ ‘๊ทผ์€ search-form block์ด ์ผ๋ฐ˜์ ์œผ๋กœ ์œ ์ง€๋˜๋Š” ๋™์•ˆ, header__search-form element์˜ ์œ„์น˜์™€ margin๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ์ ์œผ๋กœ, ์šฐ๋ฆฌ๋Š” ์–ด๋–ค padding๊ฐ’๋„ ์ •์˜ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“  ํ™˜๊ฒฝ์—์„œ๋„ block์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์šฐ๋ฆฌ๊ฐ€ ๋…๋ฆฝ์ ์ด๋ผ๊ณ  ๋ถ€๋ฅผ ์ˆ˜ ์žˆ๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค.

๐Ÿฏ File structure

BEM ๋ฐฉ๋ฒ•๋ก ์—์„œ ์ฑ„ํƒ ๋œ ์ปดํฌ๋„ŒํŠธ ์ ‘๊ทผ๋ฒ•์€ ๋˜ํ•œ ํ”„๋กœ์ ํŠธ์˜ ํŒŒ์ผ๊ตฌ์กฐ์—๋„ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. block๊ณผ element, modifier์˜ ๊ตฌํ˜„์€ ๋…๋ฆฝ์ ์ธ ๊ธฐ์ˆ  ํŒŒ์ผ๋“ค๋กœ ๋ถ„๋ฆฌ๋˜๋ฉฐ, ์ด ๋ถ„๋ฆฌ๋œ ํŒŒ์ผ๋“ค์„ ๊ฐ๊ฐ ๋”ฐ๋กœ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

File structure์€ ์•„๋ž˜์˜ ํŠน์„ฑ์„ ์ง€๋‹™๋‹ˆ๋‹ค.

  • ๋‹จ์ผ block์€ ๋‹จ์ผ directory๋ฅผ ๊ฐ€์ง„๋‹ค.
  • block๊ณผ directory๋Š” ๊ฐ™์€ ์ด๋ฆ„์„ ๊ฐ€์ง„๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, header block์€ header/ directory์•ˆ์—, ์žˆ๊ณ  menu block์€ menu/ directory ์•ˆ์— ์žˆ๋‹ค.
  • block๋“ค์˜ ๊ตฌํ˜„์ฒด๋Š” ๋…๋ฆฝ๋œ ๊ธฐ์ˆ  ํŒŒ์ผ๋“ค๋กœ ๋‚˜๋‰˜์–ด์ง„๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, header.css์™€ header.js๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.
  • block directory๋Š” ๊ทธ block์˜ element๋“ค๊ณผ modifier๋“ค์„ ์œ„ํ•œ subdirectory๋ฅผ ์œ„ํ•ด root directory์— ์žˆ๋‹ค.
  • element directory์˜ ์ด๋ฆ„์€ ์ด์ค‘ underscore(__)๋กœ ์‹œ์ž‘ํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, header/__logo ๋‚˜ menu/__item/ ๊ณผ ๊ฐ™๋‹ค.
  • modifier directory์˜ ์ด๋ฆ„์€ ๋‹จ์ผ underscore(_)๋กœ ์‹œ์ž‘ํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, header/_fixed/ ์™€ menu/_theme_islands/ ์™€ ๊ฐ™๋‹ค.
  • element๋“ค๊ณผ modifier์˜ ๊ตฌํ˜„์ฒด๋Š” ๋…๋ฆฝ๋œ ๊ธฐ์ˆ  ํŒŒ์ผ๋“ค๋กœ ๋ถ„๋ฆฌ๋œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, header__input.js์™€ header_theme_islands.css ์™€ ๊ฐ™๋‹ค.

Example

    search-form/                           # Directory of the search-form

        __input/                           # Subdirectory of the search-form__input
            search-form__input.css         # CSS implementation of the
                                           # search-form__input element
            search-form__input.js          # JavaScript implementation of the
                                           # search-form__input element

        __button/                          # Subdirectory of the search-form__button
                                           # element
            search-form__button.css
            search-form__button.js

        _theme/                            # Subdirectory of the search-form_theme
                                           # modifier
            search-form_theme_islands.css  # CSS implementation of the search-form block
                                           # that has the theme modifier with the value
                                           # islands
            search-form_theme_lite.css     # CSS implementation of the search-form block
                                           # that has the theme modifier with the value
                                           # lite

        search-form.css                    # CSS implementation of the search-form block
        search-form.js                     # JavaScript implementation of the
                                           # search-form block

์œ„์™€ ๊ฐ™์€ ํŒŒ์ผ ๊ตฌ์กฐ๋Š” ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ž…๋‹ˆ๋‹ค.

์œ„์˜ ํŒŒ์ผ ๊ตฌ์กฐ๋Š” ์ถ”์ฒœ ์‚ฌํ•ญ์ด์ง€ ํ•„์ˆ˜ ์‚ฌํ•ญ์ด ์•„๋‹ˆ๋ฉฐ, ๋‹ค๋ฅธ ๋Œ€์•ˆ์˜ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ๋ฅผ ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, ํŒŒ์ผ์„ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•œ BEM ์›์น™์„ ๋”ฐ๋ฅด๊ธฐ๋งŒ ํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค.

์›๋ฌธ : BEM Quick start