Like Lion : 10일차

강의

오늘의 과제

오늘 배운 OOCSS를 활용해서 만들어보았다.

source code

---

피그마 활용

100%에서 screenshot 딴다.
PerfectPixel by WellDonCode (Chrome Extension 다운받기)
screesshot과 비교하여 정확하게 만들 수 있다.

---

CSS 설계기법

OOCSS

레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론

    /* 구조와 스킨의 분리 */

    .btn {
      width: 200px;
      height: 80px;
      font-size: 30px;
    }

    .btn-close {
      background: black;
      color: #FFF;
      border: 3px dotted #fff;
    }

    /* container와 contents를 분리하라 */
    /* 아래 예제 처럼 스타일링되면  #main이 사라졌을 때 css가 무력화된다. module화를 해야한다. */
    #main .btn {
      width: 300px;
      display: inline-block;
      padding: 20px;
      margin: 10px;
      font-size: 18px;
      line-height: 1.5;
    }

    #main .general {
      background-color: aquamarine;
      color: black;
    }

    #main .warning {
      background-color: azure;
      color: blue;
    }

  <h1>구조와 스킨의 분리</h1>

  <button type="button" class="btn"></button>
  <button type="button" class="btn btn-close"></button>

  <h1>container와 contents를 분리</h1>

  <main id="main">
    <button type="button" class="btn general">기본 버튼</button>
    <button type="button" class="btn warning">취소 버튼</button>
  </main>

---

SMACSS

1️⃣ base
프로젝트의 표준 스타일을 정의함.
방법론 :

• 구조(structure)와 스킨의 분리
• 컨테이너와 콘텐츠의 분리

2️⃣ layout
헤더, 메인영역, 푸터, 사이드 바와 같은 웹사이트에서 큰 틀을 구성하는 모듈에 관한 규칙.

• 대부분 페이지에 몇개 존재하지 않기 때문에 ID 선택자를 사용하기도 함.

#header {
	...
}
**텍스트**
#section {
	...
}

#footer {
	...
}

<header id="header"></header>
<section id="section"></section>
<footer id="footer"></footer>

3️⃣ module과 subclass
레이아웃안에 배치되는 모든 요소를 의미

• 반복되는 요소들이기 때문에 ID 선택자를 사용하지 않으며, 요소 선택자의 사용을 최소화.(자식 요소에만 적용)
• 비슷한 모듈안에서도 모양이 조금씩 다를 경우 서브클래스를 만든다. (btn-small, btn-long 등등)

.btn.bts-small {
	width: 50%;
}
.btn.bts-big {
	width: 150%;
}

4️⃣ state
기존 스타일을 덮어쓰거나 확장하는데 사용하는 스타일

• 서브클래스와 다른 점은 레이아웃이나 모듈에 둘 다 적용가능하며, 서브클래스가 한번 적용되면 바뀌지 않는 - 속성임에 비해 스테이트는 자바스크립트로 필요할때 넣었다 뺐다 할 수 있다는 점.
• 클래스 이름은 앞에 is 라는 접두사를 사용 (is-hidden, is-active … )

---

BEM

얀덱스(Yandex)사가 만든 설계방법.
기본 규칙

• ID 선택자와 요소 선택자를 권장하지 않는다. (우선 순위 계산의 원할함을 위해서. z-index를 10단위로 계산하는 것과 마찬가지)

1. Block

어디에서나 재사용 가능한 부품
클래스 네이밍은 목적이 명확해야 (Error, hidden … )
소문자를 사용하며 여러 단어가 연결되는 경우는 하이픈 케이스(케밥케이스)를 사용 (cont-nav … )

1. Element

Block 을 구성하는 요소들로 block 에 종속되야 함
때문에 block 의 클래스 이름을 상속 받고 element의 클래스 이름을 언더바 두 개를 접두사로 하여 사용 (errorlink, opacity-halfbtn )

Element 안에 또 element를 사용할 경우 클래스 네이밍은 element 끼리 중첩하지 않는다.

opacity-half__btn__txt (x)
opacity-half__txt (o)

1. Modifier

block이나 element의 모습이나 상태 또는 움직임 (요소가 활성화된 상태, 사이즈, 컬러 등등)을 정의

단독으로 클래스 이름을 사용하지 않고 두 번째 클래스 이름으로 사용

btn_size_small (x)
btn_move btn_move_active (o)

클래스 네이밍은 block이나 element의 이름을 상속 받고 언더바 하나로 연결
만약 두 개 이상의 단어를 사용해야하면 block처럼 하이픈으로 연결

btn_move btn_move_size-small (o)

이렇게 언더바와 하이픈이 혼용된 형태를 취함.

참고 : [CSS 방법론] BEM 방식 :: nana_log