CDD

Component Driven Development

프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야 하는 팀원 수가 많아지는 것에 비해 CSS를 작성하는 일관된 패턴이 없었다.
CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 높아졌다.
이에 CSS전처리기(CSS Preprocessor)라는 개념이 등장했는데, 전처리기는 CSS가 구조적으로 작성될 수 있게 도와주는 도구이다.
CSS는 반복적으로 해야하는 작업이 많고 문서의 양이 많아져 유지관리에도 많은 영향을 끼치게 된다. 이러한 CSS의 문제들을 전처리기의 프로그래밍 개념(변수, 함수, 상속 등) 을 활용하여 해결한다.
전처리기는 자체적으로 웹 서버가 인지하지 못하기 떄문에 각 CSS 전처리기에 맞는 Compiler를 사용해야 하고, 컴파일 하게 되면 우리가 사용하는 CSS 문서로 변환이 된다.

가장 유명한 CSS 전처리기로, Syntactically Awesome Style Sheets의 약자이며 CSS를 확장해 주는 대표적인 스크립팅 언어이다.
자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에 재사용할 수 있는 기능을 가졌다.
하지만 많은 문제점을 발견하여, 결국 전처리기가 내부에서 어떤 작업을 하는지 알지 못한 채, 스타일이 겹치는 문제를 해결하기 위해 단순히 계층 구조를 만들어 내는 것에 의지하게 되었다.
CSS 전처리기의 문제를 보완하기 위해 나온 방법론으로 BEM, OOCSS, SMACSS가 있다.
- 공통 지향점
- 코드의 재사용성 강화
- 코드의 간결화(유지 보수 용이)
- 코드의 확장성
- 코드의 예측성(클래스 명으로 의미 예측)
문제점
- 전처리 과정이 필요하다.
- 디버깅의 어려움이 있다.
- 컴파일한 CSS파일이 거대해진다.

Block, Element, Modifier로 구분하여 클래스명을 작성하는 방식으로, Block, Element, Modifier은 각각 __와 --로 구분한다.
- Block : 전체를 감싸고 있는 블럭 요소
- Element : 블럭이 포함하고 있는 한 조각
- Modifier : 블럭 또는 요소의 속성(블럭이나 엘리먼트의 외관이나 상태를 변화가능하게 하는 부분)
  1 2 3 4 .header__navigation--naviText{ color: red; } // header(Block), navigation(Element), naviText(Modifier)
클래스명은 BEM 방식의 이름을 여러 번 반복하여 재사용할 수 있게 하며 HTML/CSS/SASS 파일에서도 일관된 코딩 구조를 만들어 준다.
문제점
- 클래스명 선택자가 장황해진다.
- 긴 클래스명 때문에 마크업이 불필요하게 커진다.
- 재사용을 위해 모든 UI 컴포넌트를 명시적으로 확장해야만 한다.
- 캡슐화가 없기 때문에 개발자들이 유일한 클래스명을 선택하는 것에 의존한다.
  - 캡슐화(encapsulation) : 객체의 속성과 행위를 하나로 묶고 실제 구현 내용의 일부를 외부에 감추어 은닉하는 개념

	특징	장점	단점
CSS	기본적인 스타일링 방법		일관된 패턴을 갖기 어렵고 `!important`가 남용된다.
SASS(preprocessor)	프로그래밍 방법론을 도입하여, 컴파일된 CSS를 만들어내는 전처리기	변수/함수/상속 개념을 활용하여 재사용 가능, CSS구조화	전처리 과정이 필요하며, 디버깅의 어렴움이 있고 컴파일한 CSS 파일이 거대해진다.
BEM	CSS클래스명 작성에 일관된 패턴을 강제하는 방법론	네이밍으로 문제 해결, 전처리 과정 불필요	선택자의 이름이 장황하고 클래스의 목록이 많아진다.
Styled-Component	컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리	CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경 쓸 필요가 없다.	빠른 페이지 로드에 불리하다.