TIL. CSS 설계 기법

기대하고 기대하던 CSS 설계 기법을 학습했다.
저 이제 class명 고민 그만할래요..✋
마크업에서 기준없이 class명을 정하다보니 오래 걸리는 것과 기억하기 힘든 것이 문제였다.
CSS 설계 기법으로 BEM을 알게 되어서 이제 좀 더 클린한 마크업이 되길 기대하고 있다.

✅
우선 방법론에는 크게 3가지가 있다.
1. OOCSS 2.SMACSS 3.BEM

그 중에 3번째 방법론인 BEM에 대해 먼저 정리를 한 후
나머지 2가지 방법론을 다뤄보겠다.

BEM (Block Element Modifier)

- 러시아에 있는 얀덱스(Yandex)사가 만든 설계방법이다.
- HTML, CSS의 클래스의 설계 규칙이다.
- OOCSS와 같은 모듈기반의 방법을 뿌리로 한다.

✅ 기본규칙

▶ 원활한 가중치 계산을 위해 Class 선택자만 사용한다. ( z-index 10단위로 사용)
▶ 대문자대신 소문자, 숫자를 이용한다.
▶ ex) class="opacity_half__txt"

✅ 목표

▶ 인터페이스 요소의 컴포넌트를 여러 개의 블록 레벨로 나누어 쉽게 관리하는 것이다.
(* 컴포넌트 : 재사용 가능한 코드)

✅ 방법

1. Block (블록)

#재사용 #간단 #직관적

• 어디에서나 재사용 가능하고 독립적으로 분리가 가능하다.
• 클래스 네이밍은 형태보다 의미에 집중한다.
• ex) Error, hidden
• 하이픈 케이스 (케밥케이스)를 사용한다.
• ex) cont-nav
• 환경에 영향 받지 않아야 한다.

2. Element (요소)

#의존적 #중첩권장X #선택적

• 블록을 구성하는 요소들로 블록에 종속되어야 한다.
• 블록의 클래스 이름을 상속 받는다.
• 요소의 클래스 이름은 언더바 두 개로 사용한다.
• ex) error__link, opacity-half__btn
• 요소를 중첩해서 사용하지 않는다.
• ex) opacity-half__btn__txt (x)
• opacity-half__txt (o)

3. Modifier (수식어)

#요소차이수정 #수식

• 블록과 요소의 모습,상태, 움직임을 정의한다.
• 단독으로 사용하지 않고 두 번째 클래스 이름으로 사용한다.
• ex) btn-move btn_move_active
• 블록이나 요소의 이름을 상속 받고 언더바 하나로 연결한다.
• 언더바와 하이픈이 혼용된 형태이다.
• ex) btn-move btn-move_size-small (o)

✅ Why BEM?

1) HTML, CSS 환경을 기반으로 하여 유지 관리 가능
2) 쉽게 이해할 수 있는 코드 (간단, 단순)

---

OOCSS (Object Oriented CSS)

- 객체지향 CSS
- 모듈을 만들어 조합하도록 하는 방법론

✅ 방법

1. 구조와 스킨의 분리

• 구조 : 레이아웃에 영향을 주는 속성들이 포함된다. (width, padding..)
• 스킨 : 레이아웃에 영향을 주지않고, 시각적인 영향을 주는 속성이 포함된다. (font, border, color..)

2. 컨테이너와 콘텐츠의 분리

#의존적 #중첩권장X #선택적

• 블록을 구성하는 요소들로 블록에 종속되어야 한다.
• 블록의 클래스 이름을 상속 받는다.

---

SMACSS

- CSS 규칙을 5가지로 나눈 스타일 사이드
- 확장 가능한 모듈식 아키텍쳐

✅ 기본규칙

▶ 모듈 방식으로 나온다 ( z-index 10단위로 사용)
▶ 대문자대신 소문자, 숫자를 이용한다.
▶ ex) class="opacity_half__txt"

✅ 목표

▶ 인터페이스 요소의 컴포넌트를 여러 개의 블록 레벨로 나누어 쉽게 관리하는 것이다.
(* 컴포넌트 : 재사용 가능한 코드)

✅ 방법

1. Block (블록)

#재사용 #간단 #직관적

• 어디에서나 재사용 가능하고 독립적으로 분리가 가능하다.
• 클래스 네이밍은 형태보다 의미에 집중한다.
• ex) Error, hidden
• 하이픈 케이스 (케밥케이스)를 사용한다.
• ex) cont-nav
• 환경에 영향 받지 않아야 한다.

2. Element (요소)

#의존적 #중첩권장X #선택적

• 블록을 구성하는 요소들로 블록에 종속되어야 한다.
• 블록의 클래스 이름을 상속 받는다.

| 참고 사이트
http://getbem.com/
http://getbem.com/introduction/

---

👉 피드백
- 멋사 프론트엔드 스쿨 1기 2주차에 들어섰다!
2주차는 나에 대한 반성을 많이 하게 된 주였다.
구현하는 것만 집중해서 코드를 제대로 이해하지 않고
의미없이 사용하는 코드들이 늘어나고 엉망이 되었다..

멘토님께 코드리뷰 받을 때
내가 쓰는 코드를 이해하면서 작성해야한다고 하셨다.
(+ 불필요한 CSS 꼭 제거하기)
처음엔 많이 써보고 에러도 많이 내는게 중요하다고 하셨는데,
코드가 왜 들어갔는지 모르고 쓰는 일이 없도록 하자!!

👉 액션플랜
- HTML 마크업부터 다시 기초다지기!
- CSS 설계 기법 중 BEM 방법론으로 class명 짓는 연습하기.
(논리적으로 쓰임에 대해 이해하면서)