16일차_CSS 설계 기법

각 회사마다 차용하는 CSS 설계 기법이 있습니다.

아래와 같은 방법으로 효율적인 CSS를 만들 수 있습니다.

 

1. OOCDD(Object Oriented CSS)

---

직역하자면 "객체지향CSS"입니다.

여기서 객체는 UI를 말합니다.

 

1.1 개념

---

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

1.2 방법

---

1.2.1 구조(structure)와 스킨의 분리

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

ex) 아바타에 옷 바꿔서 입혀주기(아바타, 다른 스킨)

 

구조: width, height, padding, margin 등 레이아웃에 영향을 미치는 속성

스킨: font, color, background, vorder 등 레이아웃은 아니지만 시각적인 영향을 주는 속성

 

1.2.2 컨테이너와 콘텐츠의 분리

콘텐츠의 스타일이 컨테이너에 종속되지 않도록 합니다.

즉 콘텐츠의 스타일 선택자에 컨테이너의 클래스를 배제합니다.

 

 

Tip. 카카오 회사의 컨벤션 예시

---

컨벤션이란? 회사마다 코드를 할 때 공유하는 일종의 규칙

*이는 이미 레거시 코드이기 때문에 공유가 가능합니다.

 

HTML 컨벤션

* prefix를 이용하여 공통 UI는 id로 묶어내고, 기타 레이아웃은 class 처리한다.

* 큰 레이아웃은 전체를  kakao Wrap으로 감싸고  kakao Head,  kakao Content,  kakao Foot으로 구성한다.

* 이는 모바일도 해당된다.(layout name은 Daum의 HTML 문서임을 알 수 있게 하는 기능도 있음.)

* kakao Wrap을 relative로 하여 daumMinidaum을 상단으로 위치하게 한다.

* 웹 접근성용 바로가기(목차) 위치는 가장 상단에 위치한다.

 <header id= "kakaoHead">
         <div class="k_head">
             <h1>
                 <a id="kakaoLogo">Daum(text)</a>
                 <a id="kakaoServiceLogo">서비스명(text)</a>
             </h1>
         </div>
         <strong class="screen_out">관련 서비스</strong>
         <nav>
             <h2>서비스명 메뉴</h2>
             <ul>GNB</ul>
         </nav>
     </header>

2. SMACSS (Scalable and Modular Architecture for CSS)

---

2.1 개념

---

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

 

역할목록

베이스

레이아웃

모듈

스테이트

테마

2.2 방법

---

2.2.1 베이스

프로젝트의 표준 스타일을 정의합니다.

전체적으로 사용되는 폰트 패밀리,  폰트 사이즈, reset 스타일, <img> 공통 스타일 등이 포함됩니다.

 

2.2.2 레이아웃

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

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

 

2.2.3 모듈

레이아웃안에 배치되는 모든 요소를 의미합니다. 반복되는 요소들이기 때문에 ID 선택자를 사용하지 않으며,

요소 선택자의 사용을 최소화합니다.(자식 요소에만 적용)

비슷한 모듈안에서도 모양이 조금씩 다를 경우 서브클래스를 만듭니다. (btn-small, btn-long 등등)

 

2.2.4스테이트

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

서브클래스와 다른 점은 레이아웃이나 모듈에 둘 다 적용가능하며,

서브클래스가 한번 적용되면 바뀌지 않는 속성임에 비해 스테이트는 자바스크립트로 필요할때 넣었다 뺐다 할 수 있다는 점 입니다. 클래스 이름은 앞에 is 라는 접두사를 사용합니다. (is-hidden, is-active … )

 

2.2.5 테마

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

 

3. BEM (Block, Element, Modifier)

---

ref : http://getbem.com/

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의 이름을 상속 받고 하이픈 두 개로 연결합니다.

만약 두 개 이상의 단어를 사용해야하면 block처럼 하이픈으로 연결합니다.

btn-move btn-move—size-small (o)

 

만약 엘레먼트의 모디파이어라면 엘레먼트의 이름을 상속받기 때문에 언더바와 하이픈이 혼용된 형태로 사용됩니다.

<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>

 

💡 하이픈 VS 대시

하이픈은 단어나 단어의 일부를 연결하는데 사용되는 구두점입니다.

대시는 하이픈보다 길며 일반적으로 범위을 나타내거나 쌍으로 사용해(—) 쉼표 대신 사용됩니다.

BEM에서 대시를 이용하라고 설명하고 있지만 사실 사용하고 있는것은 하이픈입니다.

Mac : Option + shift + hyphen

윈도우 : Alt + 숫자 0151

 

Tip. 카카오 회사의 네이밍 예시

---