17. 11. 07 · Yesdoing의 개발 블로그

오늘 한 일

주짓수
- 트라이앵클 초크
- 가드 패스
BEM 방법론 학습

###Quick Start

Block

기능적으로 독립된 페이지 구성요소는 재사용 되어질 수 있다. HTML에서 블록은 class 속성에 의해 표현되어진다.

특징:

block name은 그것의 목적을 묘사합니다.(“그것이 뭐니?” – menu나 button), 그것의 상태를 묘사하는게 아닙니다.(“그것이 뭐로 보이니?” – red 나 big).

Example

<!-- Correct. The `error` block is semantically meaningful -->
<div class="error"></div>

<!-- Incorrect. It describes the appearance -->
<div class="red-text"></div>

블록은 그것의 환경에 영향을 주지 않습니다. 블록을 위한 포지셔닝이나 외부의 margin에 고정되지 않습니다.
BEM을 사용할 때 CSS tag나 ID 선택자를 사용하면 안됩니다. 이것은 위치를 이동하기위해서나 블록을 재사용하기 위해 필요한 비의존성을 확실히 해야합니다.

Guidelines for using blocks

Nesting(중첩)

블록은 서로서로 중첩될 수 있습니다.
당신은 중첩 레벨들의 어느 숫자든 가질 수 있습니다.

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 name은 그것의 목적을 묘사합니다.(“What is this?” – item, text, etc.), 상태를 묘사하지 않습니다.(“What type, or what does it look like?” — red, big, etc.).
element’s full name의 구조는 block-name__element-name입니다. element name은 이중 underscore(__)로 block name으로부터 구분되어집니다.

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>

Guidelines for using elements

Nesting(중첩)

Element들은 서로서로 내부에서 중첩되어질 수 있습니다.
당신은 중첩 레벨의 어떤 숫자든 가질 수 있습니다.
element는 항상 블록의 한 부분입니다. 또 다른 element가 아닙니다. 이것은 element name들이 block__elem1__elem2와 같이 계층적으로 정의될수 없음을 의미합니다.

Example

<!--
    Correct. The structure of the full element name follows the pattern:
    `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>

<!--
    Incorrect. The structure of the full element name doesn't follow the pattern:
    `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>

block name은 namespace로 정의합니다. element들은 block에 의존하는걸 보장되어집니다.(block__elem). 블록은 DOM tree에서 중첩된 elements의 구조를 가질 수 있습니다.

Example

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

그러나, 이 block구조는 BEM 방법록에서 elements의 수평 목록으로 항상 표현됩니다.

Example

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

이것은 당신이 block의 DOM 구조를 서로 분리된 element를 위해 코드를 변경하지 않고 변경하는 것은 허락합니다.

Example

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

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

block들의 구조를 변경합니다. 그러나 element를 위한 역활과 그들의 이름들은 똑같이 유지됩니다.

Membership

element는 항상 block의 부분 입니다. 그리고 당신은 block으로부터 분리해서 사용할 수 없습니다.

Example

<!-- Correct. Elements are located inside 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>

<!--
    Incorrect. Elements are located outside of the context of
    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 구성요소의 선택사항입니다. 모든 block이 elements를 가지진 않습니다.

Example

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

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

Should I create a block or an element?

Create a block

코드 섹션을 재사용 할 수 있으며 구현중인 다른 페이지 구성 요소에 의존하지 않습니다.

Create a element

코드의 일부분을 상위 엔티티 (블록)없이 별도로 사용할 수없는 경우.

예외는 개발을 단순화하기 위해 하위 부품 (하위 요소)으로 나누어 져야하는 요소입니다. BEM 방법론에서는 요소 요소를 만들 수 없습니다 . 이와 같은 경우에는 요소를 만드는 대신 서비스 블록을 만들어야합니다.

Modifier

block이나 element의 행동이나 상태 모양을 정의하는 entity.

특징:

modifier name은 모양을 묘사한다.(“What size?” or “Which theme?” and so on — size_s or theme_islands), 그것의 상태(“How is it different from the others?” — disabled, focused, etc.) 그리고 그것의 행동 (“How does it behave?” or “How does it respond to the user?” — such as directions_left-top).
modifier name은 block이나 element의 이름으로부터 구별되어진다. single underscore을 사용함으로써(_).

Types of modifiers

Boolean

오직 modifier가 있고 없음이 중요하고 그것의 값이 부적절할때 사용되어진다. 예를들어, disable Boolean modifier가 있으면, 그것의 값은 true가 되는걸 가정한다.
modifier들의 전체 이름의 구조는 다음의 형태를 따릅니다.
- block-name_modifier-name
- block-name__element-name_modifier-name

Example

<!-- The `search-form` block has the `focused` Boolean modifier -->
<form class="search-form search-form_focused">
    <input class="search-form__input">

    <!-- The `button` element has the `disabled` Boolean modifier -->
    <button class="search-form__button search-form__button_disabled">Search</button>
</form>

Key-value

modifier 값이 중요할때 사용되어진다. 예를들어 “a menu with the islands design theme”: menu_theme_islands.
modifier의 전체 이름의 구조는 다음의 형식을 따릅니다.
- block-name_modifier-name_modifier-value
- block-name__element-name_modifier-name_modifier-value

Example

<!-- The `search-form` block has the `theme` modifier with the value `islands` -->
<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>

<!-- You can't use two identical modifiers with different values simultaneously -->
<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>

Guidelines for using modifiers

modifier는 혼자 사용되어질 수 없습니다.

BEM의 관점에서 modifier은 변경되는 block이나 element로 부터 분리되어 사용되어 질 수 없습니다. modifier는 entity의 모양, 행동, 상태에 따라 변화해야합니다. 그것을 대체하는게 아니라.

Example

<!--
    Correct. The `search-form` block has the `theme` modifier with
    the value `islands`
-->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

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

<!-- Incorrect. The modified class `search-form` is missing -->
<form class="search-form_theme_islands">
    <input class="search-form__input">

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

Mix

단일 DOM node에서 다른 BEM 엔티티들을 사용하기 위한 기술

Mix는 너에게 허용한다.

중첩된 코드 없이 다중 엔티티의 스타일과 행동을 결합한다.
이미 존재하는 것에 기반된 의미상으로 새로운 UI 구성요소를 만든다.

Example

<!-- `header` block -->
<div class="header">
    <!--
        The `search-form` block is mixed with the `search-form` element
        from the `header` block
    -->
    <div class="search-form header__search-form"></div>
</div>

이 예제에서 우리는 search-formblock과 header block으로 부터 search-form element의 스타일과 행동을 결합시켰다. 이 접근은 우리에게 header__search-form에서 외부 margin과 위치를 고정하는 것을 허락한다. search-formblock 그 자체가 포괄적으로 유지된다. 결과적으로 우리는 다른 환경의 block을 사용할 수 있다. 왜냐하면 그것은 padding을 정의하지 않았다. 이것은 우리가 독립적이라고 부르는 이유이다.

File structure

BEM 방법론에 채택된 구성요소 접근은 또한 파일구조에 프로젝트들에 적용한다. block, element, modifier의 구현은 독립적인 기술파일들로 나뉜다. 우리가 개별적으로 그것들을 연결할 수 있다.

특징

한 개의 block은 한개의 디렉토리에 일치한다.
block과 디렉토리는 같은 이름을 가진다. 예를들어 header block은 header/디렉토리 내부에 있다. 그리고 menu block은 menu/ 디렉토리 내부에 있다.
구현된 block은 분리된 기술파일들로 나뉘어 진다. 예를들어 header.cssand header.js
block 디렉토리는 root 디렉토리 이다. 그것의 elements와 modifiers들의 서브디렉토리를 위한
element 디렉토리의 이름은 double underscore를 가지고 시작한다. 예를 들어 header/__logo/ 나 menu/__item/.
modifier 디렉토리의 이름은 single 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원칙을 따르는 대체를 예를들어 Flat이나 Flex

BEM

오늘 한 일

Block

Guidelines for using blocks

Nesting(중첩)

Element

Guidelines for using elements

Nesting(중첩)

Membership

Optionality

Should I create a block or an element?

Create a block

Create a element

Modifier

Types of modifiers

Boolean

Key-value

Guidelines for using modifiers

modifier는 혼자 사용되어질 수 없습니다.

Mix

File structure

특징

Comments

Related Posts

Usage with TypeScript 31 Mar 2019

Javascript Testing Tool - Jest 11 Nov 2018

리액트를 다루는 기술 Router & code split 정리 06 Nov 2018