COWERKERS 프로젝트는 Next.js를 사용할 프로젝트인데 스타일링 방식을 고민해보았다.

Styled JSX : JSX 내부에 css 문법을 작성하는 방식! React 웹 프레임워크이기 때문에, 기본적으로 Styled JSX를 사용가능 / 한번 작성한 CSS를 재사용하기 어렵다

CSS-in-JS : CSS코드가 JS에 작성되는 방식! 컴포넌트 상태 공유 가능, 명명 규칙이 필요치 않음

Utility-First CSS : 미리 클래스명을 만들어놓고 inline css 형식으로 html에 바로 넣어서 사용하는 방식

CSS Modules : CSS를 모듈화해서 관리하는 방식 정의한 CSS 클래스마다 자동으로 고유한 class name을 생성해서 해당 class를 로컬 스코프로 제한함으로써 naming 충돌을 예방

대표적인 CSS-in-JS 라이브러리인 Styled Components

VS 대표적인 Utility-First CSS 라이브러리가 Tailwind

둘 중에 선택을 하려고 했다.

렌더링 속도,

CSS-in-JS의 가장 큰 단점은 렌더링 속도 저하입니다. CSS-in-JS 방식은 JS로 CSS를 작성하기 때문에, 페이지 로딩 시 구문 분석 과정이 필요하다.