CSS in CSS

CSS의 단점을 해결하기 위한 방식으로 CSS Module, CSS Preprocessor 가 있다.
전체 페이지에 필요한 CSS 처음부터 전부 로딩해 style 태그를 생성한다.

1. CSS Module

CSS 를 모듈화하여 사용하는 방식이다.

// Box.module.css
.Box {
	...
}

// Box.jsx
import style from "./Box.module.css";
 
function Box() {
	return <div className={style.Box}></div>;
}
 
// styles.Box => _src_Box_module__Box

CSS 클래스 생성시 자동으로 고유한 클래스이름으로 변환해 scope를 지역적으로 제한한다.

클래스 이름이 중복되어도 고유한 새로운 이름이 만들어져 중복 및 관리의 위험이 적고 Global namespace 문제를 해결할 수 있다.

한곳에서 모든 것을 작성하지 않기 때문에 별도로 많은 CSS 파일을 만들어야 한다는 단점이 있다.

2. CSS Preprocessor

자신만의 특별한 Syntax(구문)를 가지고 CSS 를 생성하는 프로그램이다.

CSS의 문제점을 프로그래밍 방식(변수, 함수, 상속 등) 일반적인 프로그래밍 개념을 사용해 보완한다.

공통 요소, 반복적인 항목을 변수 또는 함수로 대체할 수 있는 재사용성, 시간과 비용 절약, 코드 유지 및 관리용이 등의 장점이 있다.

전처리기를 위한 도구가 필요하고 다시 컴파일하는데 시간이 소요된다는 단점이 있다.

CSS in JS

JavaScript 코드에서 CSS를 작성하는 방식을 말한다.

2014년 페이스북 개발자인 Christopher Chedeau가 소개한 방식으로
다음은 CSS 에서 생길수 있는 문제점이고 CSS-in-JS로 이를 해결할 수 있다고 주장했다.

모든 스타일 이름이 global에 선언되어 중복되지 않은 이름을 사용해야 한다.(Global namespace)
CSS 간의 의존관계를 관리하기 어렵다.(Dependencies)
불필요한 CSS를 제거하기 어렵다.(Dead Code Elimination)
긴 스타일 이름을 최소화 하기 어렵다.(Minification)
JavaScript 와 상태값을 공유하기 어렵다.(Sharing Constants)
CSS 로드 순서에 따라 스타일 우선순위가 달라진다.(Non-deterministic Resolution)
컴포넌트의 상속으로 독립적으로 분기하기 어렵다.(Isolation)

이중 대표적인 CSS-in-JS 라이브러리인 Styled Component에 대해 살펴보자.

장점 :

CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화 하는 모듈성
JavaScript 환경을 최대한 활용해 상수와 함수를 공유
현재 사용중인 스타일만 DOM에 포함
짧은 길이의 유니크한 클래스를 자동으로 생성하는 코드 경량화

단점 :

러닝 커브
새로운 의존성
별도의 라이브러리 설치로 인한 번들 크기 증가
CSS-in-CSS에 비해 느린 속도

//index.jsx
const Title = styled.h1 `
	color : palevioletred;
	font-size : 24px;
`;
 
function index () {
	return <Title>CSS-in-JS</Title>;
}

여러가지 방식 모두 장단점이 있기 때문에 서비스 환경에 맞게 사용해야 한다.

컴포넌트 위주 웹사이트의 경우 필요한 컴포넌트 페이지의 CSS 만 로딩하는 CSS-in-JS가 적합할 수 있다.
상태 변경이 잦은 인터렉티브한 웹사이트의 경우 렌더링 할 때 모든 CSS 를 로딩하는 CSS-in-CSS가 적합할 수 있다.
콘텐츠가 많은 웹사이트의 경우 초기 렌더링이 길어질 경우 사용자 경험을 안좋게 할 수 있기 때문에 서버 사이드 렌더링과 CSS Modules를 혼합해 사용한다.