🔍 CDD

부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법론으로, 재사용 가능한 UI 컴포넌트를 만들 수 있다.

👀 구조적으로 CSS를 작성하는 방법

프로젝트의 규모와 복잡도 및 팀원 수가 많아지고, 모바일, 태블릿 등의 다양한 디바이스가 등장함에 따라 CSS 코드가 복잡해지게 되었다.

따라서, 효율적인 CSS 작업을 위해 구조적으로 CSS를 작성할 필요가 있었고, 이를 위한 다양한 시도가 있었다.

1. CSS 전처리기

CSS가 구조적으로 작성될 수 있게 도움을 주는 도구로, Compiler를 통해 CSS문서로 변환된다. 그러나 CSS의 용량이 매우 커진다는 단점이 있다. (ex. SASS)

2. BEM

Block, Element, Modifier로 구분하여 클래스 명을 작성하는 방법으로, 클래스 명의 재사용이 가능하고, 더 일관된 코딩 구조를 만들어준다. 그러나, 재사용 시 모든 UI 컴포넌트를 명시적으로 확장해야한다는 단점이 있다.

3. Styled-Component

HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 도와주는 라이브러리로, CSS를 컴포넌트 안으로 캡슐화한다.

👀 CSS 방법론들의 특징, 장단점

	특징	장점	단점
CSS	default 스타일링 방법	-	일관된 패턴x !important 남용
SASS (전처리기)	컴파일된 CSS를 만들어내는 전처리기	변수,함수,상속 개념을 활용해 재사용 가능 CSS의 구조화	전처리 과정 필요 디버깅 어려움 CSS 파일 용량 문제
BEM	CSS 클래스명 작성 시, 일관된 패턴을 적용하는 방법	네이밍으로 문제 해결 전처리 과정x	선택자 이름이 길어지는 문제 클래스 목록이 많아지는 문제
Styled-Component (CSS-in-JS)	컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리	CSS를 컴포넌트 안으로 캡슐화 네이밍, 최적화 신경 쓸 필요x	빠른 페이지 로드에 불리함 CSS 작성을 위해 여러 라이브러리를 사용하게 되므로, 번들의 크기가 커진다.

Reference: 코드스테이트