[로드맵] FrontEnd - CSS 심화 #1

Front-end 로드맵 중 CSS/JavaScript 심화부분 - 드림코딩

https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상

CSS 심화

1. BEM

BEM의 기본 구조

BEM은 Block, Element, Modifier를 뜻한다. 3가지 요소와 __ / -- 구분자를 사용하여 클레스 네임을 만들어서 css를 관리하는 방법론을 BEM 방법론이라고 한다.

.block__element--modifier {
    color: red;
}

.

Block / Element / Modifier

Block

재사용 가능한 기능적으로 독립적인 페이지 컴포턴트. 즉, 어딘가에 종속되지 않고 어디서든 재사용할 수 있는 요소를 말한다.

Block 구분

 

Element

Block을 구성하는 단위. 자신이 속한 Block 내에서만 의미를 가진다. 재사용 X

Element 구분

<!-- 잘못된 예 search-form__content__input, search-form__content__button X-->
<form class="search-form">
  <div class="search-form__content">
    <input class="search-form__content__input"/>
    <button class="search-form__content__button">Search</button>
  </div>
</form>

<!-- 올바른 예 -->
<form class="search-form">
  <div class="search-form__content">
    <input class="search-form__input"/>
    <button class="search-form__button">Search</button>
  </div>
</form>

 

Modifier

Block이나 엘리먼트의 속성. 다르게 생기거나, 다르게 동작하는 Block이나 Element를 만들 때 사용

Modifier 구분

<!-- boolean 타입 -->
<ul class="tab">
  <li class="tab__item teb__item--focused">Tab 1</li>
  <li class="tab__item">Tab 2</li>
  <li class="tab__item">Tab 3</li>
</ul>

<!-- key-value 타입 -->
<div class="column">
  <strong class="title">일반 로그인</strong>
  <form class="form-login form-login--theme-normal">
    <input type="text" class="form-login__id"/>
    <input type="password" class="form-login__pw"/>
  </form>
</div>

.

예제

<div class="header">
  <div class="header__logo">Logo</div>
  <div class="header__search search">
    <form class="search__form">
      <input type="text" class="search__input" />
      <button class="search__btn">검색</butoton>
    </form>
  </div>
  <div class="header__nav nav">
    <div class="nav__item nav__item--new">이벤트</div>
    <div class="nav__item">카테1</div>
    <div class="nav__item nav__item--last">카테2</div>
  </div>
</div>

See the Pen CSS BEM Exam by Byeongyeong Kim (@beark93) on CodePen.