CSS-in-JS vs Utility first CSS

나랭·2024년 9월 21일

공개SW 개발자대회를 준비하면서 react로 웹뷰를 개발할 때 styled-components를 사용했다. 이번에 공모전에서 본선에 진출하면서 새롭게 다시 개발하기로 결정을 했는데 이때 많이 사용되고 있는 styled-components vs emotion vs tailwind CSS 중에서 어떤 것을 사용할 지 고민을 하게 되었다.

CSS-in-CSS

css-module이 해당 됨

CSS 모듈은 CSS를 모듈화해서 사용하는 방식

CSS 클래스명를 만들면 자동으로 고유한 클래스네임으로 만들어서 scope를 지역적으로 제한 → 동일 프로젝트 소스 안에 CSS 클래스 명이 중복, 충돌되지 않도록 함

그러나 한 곳에서 모든 스타일을 작성하지 않아서 여러 CSS 파일을 관리해야한다는 단점 존재

CSS-in-JS

styled-components, emotion이 해당 됨

자바스크립트 코드에서 CSS를 작성하는 방식

Utility first Css와 달리 클래스명이 아닌 컴포넌트 단위로 스타일을 캡슐화

컴포넌트의 props를 전달받아 props의 값에 따른 스타일링을 쉽게 구현 가능

HTML 태그에 클래스명이 많아지지 않음

Utility fist CSS

tailwind CSS가 해당 됨

미리 세팅된 유틸리티 클래스를 활용해서 HTML 코드 내에서 스타일링

기존에 정의된 className들을 조합해서 사용 가능

클래스명을 고민할 필요가 없다는 장점

기존에 정의된 클래스명을 학습해야한다는 초기 러닝 커브

tailwind CSS를 선택한 이유

CSS-in-js의 단점

동적으로 필요한 스타일을 생성해서 페이지에 주입함 → JS 코드까지 로드되어 컴포넌트가 생성될 때 다시 한 번 동적으로 계산하여 스타일을 주입하므로 로딩 속도 면에서 불리함

따라서 tailwind CSS를 통해 필요로 하는 모든 클래스를 사전에 빌드해서 성능적인 측면을 고려하고자 했음
다만 이전에 tailwind CSS를 사용하면서 느꼈었던 클래스명이 너무 많이 나열된다는 단점을 조금이나마 보완하기 위해 tailwind css prettierrc를 이용해서 클래스명을 규칙성 있게 적용해보려고 한다!