오늘의 키워드📌

• OOCSS (Object Oriented CSS)
• SMACSS (Scalable and Modular Architecture for CSS)
• BEM (Block, Element, Modifier)

1. OOCSS

1-1. 개념

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

1-2. 방법

구조(structure)와 스킨의 분리

같은 형태의 ui에 스킨만 다르다면 구조와 스킨을 분리하여 조합한다.

구조에는 width, height, padding, margin 등 레이아웃에 영향을 미치는 속성들이 포함된다.

스킨에는 font 관련 속성, color, background 등 레이아웃에 영향을 미치지는 않지만 시각적인 영향을 주는 속성들이 포함된다.

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

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

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

컨테이너와 콘텐츠의 분리

콘텐츠의 스타일이 컨테이너에 종속되지 않도록 한다. 즉, 콘텐츠의 스타일 선택자에 컨테이너의 클래스를 배제한다.

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

/* 컨테이너에 스타일이 종속되어 있는 상태 */
#main .btn {
		width: 300px;
    padding: 20px 10px;
    margin: 10px;
    font-size: 18px;
    line-height: 1.5;
}

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

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

2. SMACSS

2-1. 개념

css 코드를 역할에 따라 분리한다.

• 베이스
• 레이아웃
• 모듈
• 스테이트
• 테마

2-2. 방법

베이스

프로젝트의 표준 스타일을 정의한다.
전체적으로 사용되는 폰트 패밀리, 폰트 사이즈, reset 스타일, <img> 공통 스타일 등이 포함된다.

레이아웃

헤더, 메인영역, 푸터, 사이드 바와 같이 웹사이트에서 큰 틀을 구성하는 모듈에 관한 규칙이다.
대 부분 페이지에 몇 개 존재하지 않기 때문에 ID 선택자를 사용하기도 한다.

모듈

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

<button type="button" class="btn">그냥 버튼</button>
<button type="button" class="btn btn-small btn-long">아이디/비밀번호 찾기</button>
<button type="button" class="btn btn-small">로그인</button>

.btn {
    display: inline-block;
    width: 300px;
    padding: 20px 10px;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    color: #fff;
    background-color: brown;
}

.btn.btn-small {
    width: 80px;
    padding: 10px 0;
    font-size: 14px;
}

.btn.btn-long {
    width: 160px;
}

스테이트

기존 스타일을 덮어쓰거나 확장하는데 사용하는 스타일이다.

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

<ul class="tabnav">
    <li class="is-active"><a href="">탭1</a></li>
    <li><a href="">탭2</a></li>
    <li><a href="">탭3</a></li>
    <li class="is-hidden"><a href="">탭4</a></li>
</ul>

.tabnav {
    display: flex;
    margin: 20px;
}

.tabnav li {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.tabnav li:first-child {
    border-left: 1px solid black;
}

.tabnav li a {
    display: block;
    padding: 10px 30px;
    text-decoration: none;
}

.is-active {
    background-color: blanchedalmond;
}

.is-active a {
    pointer-events: none;
    color: red;
}
.is-hidden {
    display: none;
}

테마

사용자에게 사이트의 느낌을 전달하는 이미지(background-image), 색상(background-color, color) 등을 의미한다.

3. BEM

3-1. 개념

얀덱스(Yandex)사가 만든 설계방법. 기본적으로 OOCSS와 같은 모듈 기반의 방법을 뿌리로 한다.

ID 선택자와 요소 선택자를 권장하지 않는다. (클래스 선택자만 사용하는 이유는 가중치 계산을 원할히 하기 위해서이다. z-index를 10단위로 사용하는 것과 같은 이유)

3-2. 방법

Block

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

.box-green{}
.error-red{}

Element

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

<section class="chapter-baseball">
    <button type="button" class="chapter-baseball__btn"></button>
</section>

element 안에 또 element를 사용할 경우 클래스 네이밍은 element 끼리 중첩하지 않는다. element끼리는 서로 종속의 관계로 보지 않기 때문이다.

<p class="txt-grey">더 많은 정보가 필요하시면
    <button class="txt-grey__btn">
        <!-- <strong  class="txt-grey__btn__bold">여기</strong> 이렇게 네이밍 하지 않습니다. -->
        <strong class="txt-grey__bold">여기</strong>
    </button>
    를 클릭하세요!
</p>

Modifier (수식어)

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

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

<!-- <nav class="nav-global--off"></nav> 잘못된 예 -->
<nav class="nav-global nav-global--off">
    <a href="" class="nav-global__link"></a>
    <a href="" class="nav-global__link"></a>
</nav>

클래스 네이밍은 block이나 element의 이름을 상속 받고 하이픈 두 개로 연결한다. btn-move btn-move--size-small

만약 element의 modifier라면 element의 이름을 상속받기 때문에 언더바와 하이픈이 혼용된 형태로 사용된다.

<nav class="nav-global nav-global--off">
    <a href="" class="nav-global__link nav-global__link--off"></a>
    <a href="" class="nav-global__link"></a>
    <a href="" class="nav-global__link"></a>
</nav>

몰랐던 점 ✏️

• 하이픈과 대시의 차이점
  • 하이픈은 단어나 단어의 일부를 연결하는데 사용되는 구두점이다.
  • 대시는 하이픈보다 길며 일반적으로 범위를 나타내거나 쌍으로 사용해(--) 쉼표 대신 사용된다.
  • BEM에서 대시를 사용하라고 설명되어 있지만, 사실 사용하고 있는건 하이픈을 사용하고 있다.
• OOCSS
• SMACSS
• BEM

오늘 하루를 정리하며.. 🌃

오늘은 아침에 운동을 다녀와서 저녁에 여유롭겠다 싶었지만.. 수업이 끝나고 저녁먹기 전까지 조금만 자야지~ 했던게 새벽까지 딥슬립 해버렸다.

해야될 것들이 미뤄지는 것도 무섭지만, 이해해야 될 것들이 미뤄지는게 더 무서운거 같다.
반드시 이해하고 넘어가야 될 것들이 하나씩 늦춰지다 보면 수업 흐름을 따라 잡기가 힘들기 때문이다.

큰일나기전에 이번주도 필살기를 써야겠다..

필살기 "주말에 정리끝내기!"