[CSS] CSS 설계기법

들어가기에 앞서 . .

 

❓ css방법론을 사용하는 이유는 ❓

 

- 코드의 재사용성을 위하여

- 유지보수를 좀 더 효율적으로 하기 위해

- 확장을 가능하게 하기위해

- 클래스명으로 무슨의미인지 예측 가능하게 하기 위해

 

 

---

 

🚀 OOCSS (Object Oriented CSS) ?

-이름에서도 알 수 있듯이 객체지향에 따라 고안된 설계방식 ,

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

 

특징

1. 구조와 외형을 분리

- 구조 : width , height , border ,margin 등..

- 외형 : color , font-color , background-color , border 등 ..

 

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

 

- btn에는 구조를 정의, btn-close에는 외형을 정의 했다.

 

2. 컨테이너와 내용을 분리

 

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

#main이라는 컨테이너에 각 .general  .warning style이 종속되어 있는 상태

 

-> 컨텐츠의 스타일 선택자(.general / .warning )에 컨테이너의 클래스(#main)를 베제한다.

 

 

 

---

 

🚀SMACSS (Scalable and Modular Architecture for CSS) ?

 

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

- 역할의 종류

 

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

 

베이스	프로젝트 표준 스타일 전체 font style , reset style ,공통스타일 등
레이아웃	헤더 ,메인영역 ,푸터 ,사이드바와 같은 큰 틀을 구성하는 모듈에 관한 규칙
모듈	레이아웃안에 배치되는 모든 요소  비슷한 모듈안에서도 모양이 조금씩 다를 경우 서브클래스를 만듬 (btn-small, btn-long 등등)
스테이트	기본 스타일을 덮어쓰거나 확장하는데 사용 레이아웃이나 모듈에 둘 다 적용가능 js로 필요할때 넣었다 뺏다 할수 있다. (클래스 이름 앞에 is라는 접두사 사용)
테마	사용자에게 사이트의 느낌을 전달하는 이미지(background-image), 색상(background-color, color … ) 등을 의미

 

 

 

[모듈예시]

<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 이외에 모양이 서브클래스 btn-small, btn-long를 사용하여 모양을 다르게 해주었다.

 

 

 

[스테이트 예시]

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

is-active , is-hidden과같이 레이아웃,모듈에 모두 적용가능하고 , js로 넣었다 뺏다 할 수 있다.

 

 

---

 

🚀BEM (Block, Element , Modifier) ?

- OOCSS와 같은 모듈 기반의 방법으로 네이밍에 중점을 둔 방법론

 

1.Block

- 어디에서나 재사용 가능한 부품을 의미

- 소문자를 사용 , 여러단어가 연결되는 경우 케밥케이스 사용

- 단어를 하이픈 (-) 으로 구분

 

 

[케밥케이스 예시]

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

 

 

---

 

2.Element 

 

- Block을 구성하는 요소로 ,blcok에 종속적이다.

- 따라서 block 클래스의 이름을 상속받고 , 언더바 두 개를 접두사로 하여 사용한다.

 

 

[element 네이밍 예시1]

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

- chapter-baseball 이라는 Block클래스 이름을 상속받아 chapter-baseball__btn 라고 짓는다.

 

 

[element 네이밍 예시2]

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

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

- element끼리는 종속관계로 보지 않기 때문이다!

 

---

 

3.Modifier(수식어)

 

- block이나  element의 모습이나 상태 , 움직임을 결정

- 활성상태, 사이즈, 컬러 등..

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

 

[예제1]

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

- nav의 nav-global명을 상속받고 하이픈두개로 연결하여 nav-global--off 으로 사용한다.

 

 

[예제2]

btn-move btn-move—size-small{}

- 2개이상의 단어 사용시 block처럼 하이픈으로 연결한다.

 

 

[예제3]

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

- Element의 Modifier이라면 element의 이름을 상속받기 때문에 언더바+하이픈이 혼용되어 사용된다.

 

- nav-global라는 block을 상속받아 nav-global__link라는 element (언더바2개) 클래스이름을 갖고 ,

  element 이름을 상속받아 nav-global__link--off라는 modifier 클래스 네이밍(언더바+하이픈)을 갖는다.

 

 

 

---

 

 

 

Q. 하이픈 vs 대시 차이점은?

하이픈 ( - )	단어나 단어의 일부를 연결하는데 사용하는 구두점
대시  ( — )	하이픈보다 길며 범위를 나타내거나 쌍으로 사용해 쉼표 대신 사용

 

 

[대시 단축키]

 

Mac : Option + shift + hyphen

 

Window PC : Alt + 숫자 015

 

---

 

🌈그밖에

 

코드리뷰 시간에 배웠던 리뷰 상기시키기

 

- form태그를 쓸땐 label도 같이 쓰자 . . . (사용 후 label를 숨기면 된다.)

- 요소의 위치를 옮기고 싶다면 부모요소 위치를 조절 후 자식위치를 옮기자! (간격도 마찬가지!)

- form 구역을 정확히 나누자! (너무 포괄적으로 잡아버렸다 . .)

- flex를 너무 남용하지 말자

 

 

 

🔥 회고

- class 네이밍이 간단한 구현을 할 땐 몰랐는데 길어질수록 정말  . .  어려워졌었는데

  참고해서 네이밍을 지어야겠다.(제 최애 네이밍 방법은 스네이크 표기법 ^_^)

 

- 오늘 코드리뷰해주신 로그인 폼을 다시 구현해보아야겠다.