CSS의 단점
- 매번 부모 요소 선택자를 같이 선언해야 한다. (코드 중복으로 인해 코드량 증가 ➡️ 유지보수성 저하)
- 함수나 변수 기능이 없기 때문에 자동화가 어렵다.
- 모든 스타일이 글로벌에 선언되어 중복 클래스명에 유의해야 한다.
- 여러 CSS 간에 의존 관계를 관리하기 힘들다.
- CSS를 업데이트하는 과정에서 불필요한 CSS를 찾아서 제거하기 어렵다.
- JS와 값을 공유할 수 없다.
- CSS 파일이 여러 개일 경우 로드 순서에 따라 스타일 적용 우선순위가 달라진다.
이러한 CSS의 단점을 보완하기 위해 CSS 전처리기와 CSS-in-CSS, CSS-in-JS가 등장하게 되었다.
CSS 전처리기 (CSS preprocessor)
CSS 전처리기 종류
- SCSS, Sass, Less, Stylus ...
(SCSS는 Sass의 버전 3에서 등장한 Sass 파생 언어로 Sass보다 CSS와 유사한 형태이다.)
- Sass는 코드의 재활용성을 높이고, 가독성을 올리는 등 CSS의 단점을 보완하고 개발의 효율성을 높이기 위해 등장하였다.
- CSS 전처리기는 CSS와 유사하지만 중첩, 조건문, 반복문 등의 기능을 제공하며, CSS를 좀 더 효율적으로 작성할 수 있게 해준다.
- CSS 전처리기를 통해 CSS를 작성하면 렌더링 시 브라우저에서 구동 가능한 CSS로 컴파일된다.
CSS-in-CSS (CSS module)
- CSS 파일에 선언한 클래스명이 고유한 클래스명으로 자동 변경되기 때문에 클래스명 중복을 신경쓰지 않아도 된다.
- 전체 페이지에 필요한 CSS를 한번에 로드하여 사용한다.
- CSS-in-JS와 달리 CSS이기 때문에 JS의 변경과 무관하며, 렌더링 시 모두 로드되므로 속도가 비교적 빠르다.
CSS-in-JS
- 자바스크립트 코드로 CSS를 작성한다.
- 문서 기준이 아닌 컴포넌트 기준으로 스타일을 모듈화한다. 따라서 컴포넌트 기반의 개발 작업에 용이하다.
- 컴포넌트에서 전달하는 값에 따라 동적으로 스타일을 적용할 수 있다. (JS의 함수, 값 공유)
- CSS가 컴포넌트에 종속되어 컴포넌트가 렌더링되었을 때에만 해당 스타일을 적용한다. (모든 CSS 로드 X)
- 클래스명을 지정하지 않는다.
- 런타임에서 동적인 클래스명이 생성되며 head 태그 내에 style 태그가 생성된다.
- CSS 전처리기를 내장하고 있다.
- JS이기 때문에 JS가 파싱되면 CSS-in-JS도 다시 파싱된다. 따라서 CSS-in-CSS에 비해 비교적 속도가 느리다.
정리
컴포넌트 기반의 개발 작업
- CSS-in-CSS: 보이지 않는 컴포넌트와 관련된 스타일을 포함하여 모든 CSS를 가져오므로 비효율적
- CSS-in-JS: 활성화된 컴포넌트와 관련된 스타일만 가져오므로 효율적
인터렉티브한 웹 페이지 개발
- CSS-in-CSS: 렌더링 시 모든 CSS를 로드하므로 컴포넌트(JS)가 변경되더라도 CSS에 영향이 없으며 바로 적용된다.
- CSS-in-JS: 상태가 변경되어 컴포넌트가 리렌더링될 때마다 JS 내에 있는 CSS 코드를 같이 파싱해야 하므로 성능 저하의 우려가 있다.
콘텐츠가 많은 웹 페이지 개발
- 비교적 속도가 느린 CSS-in-JS 지양
+=