컴포넌트 단위 개발이 보편화되면서 CSS 작성 방식도 진화하고 있다. 특히 CSS-in-JS는 최근 많은 프론트엔드 프로젝트에서 선택되고 있는 스타일링 방법 중 하나이다. 하지만 여전히 전통적인 CSS 방식과 비교해 어떤 장단점이 있는지 명확하게 이해하지 못하는 경우가 많다. 이 글에서는 CSS-in-JS와 전통적인 CSS 설계 패턴을 기술적 관점에서 비교 분석해본다.
1. 전통적인 CSS 설계 패턴
전통적인 CSS는 HTML과 분리된 .css, .scss, .sass 등의 파일에서 스타일을 선언하고 이를 HTML 요소나 클래스에 적용하는 방식이다. 대표적인 설계 패턴으로는 다음과 같은 방식이 있다.
1.1 Global CSS
가장 기본적인 방식으로, 하나의 전역 CSS 파일에 모든 스타일을 선언한다.
특징:
전역 스코프
클래스 충돌 가능성 존재
작은 프로젝트에 적합
1.2 BEM(Block, Element, Modifier)
CSS 클래스 네이밍 규칙을 통해 명시적으로 구조화하는 방식이다.
예시:
.button {}
.button__icon {}
.button--primary {}
장점:
명확한 구조
협업에 용이
클래스 충돌을 어느 정도 방지
단점:
클래스명이 길어짐
네이밍 규칙 학습 비용 필요
1.3 OOCSS, SMACSS, Atomic CSS 등
설계를 중심으로 하는 다양한 방법론이 등장했으며, 모두 재사용성과 유지보수성을 높이기 위한 접근이다.
2. CSS-in-JS
CSS-in-JS는 자바스크립트 파일 내에서 CSS를 정의하고, 런타임 혹은 빌드 타임에 DOM에 적용하는 방식이다. 대표적인 라이브러리로는 styled-components, emotion, JSS, Stitches 등이 있다.
2.1 문법 예시 (styled-components)
import styled from 'styled-components';
const Button = styled.button`
background: blue;
color: white;
&:hover {
background: darkblue;
}
`;
2.2 주요 특징
코드 근접성(Co-location): 스타일과 로직이 한 파일에 공존
자동 스코핑: 네이밍 충돌 없음
동적 스타일 가능: props 기반 조건부 스타일 지원
컴포넌트 기반 설계와 찰떡궁합
3. CSS-in-JS vs. 전통적 CSS: 항목별 비교
항목 | CSS-in-JS | 전통적 CSS |
스코핑 | 자동으로 지역화 | 클래스 네이밍으로 수동 관리 |
유지보수 | 컴포넌트 단위 관리 용이 | 대규모 프로젝트에서 복잡도 증가 |
성능 | 런타임 적용 시 오버헤드 가능성 | 정적이며 빠른 렌더링 |
설정 | 바벨/웹팩 설정 필요 | 설정 거의 없음 |
재사용성 | 높은 컴포넌트 재사용 가능 | CSS 모듈화 필요 |
서버 사이드 렌더링(SSR) | 추가 설정 필요 (ex. styleTags 전달) | 기본적으로 문제 없음 |
학습 곡선 | 자바스크립트 친숙한 개발자에게 쉬움 | CSS 자체를 먼저 배워야 함 |
4. 어떤 방식을 선택해야 할까?
선택 기준은 다음과 같다.
작고 정적인 사이트: 전통적인 CSS가 더 단순하고 빠르다.
SPA 혹은 컴포넌트 기반 프레임워크 (React, Vue 등): CSS-in-JS가 구조적인 이점을 줄 수 있다.
SSR이 필수인 SEO 위주의 페이지: 전통적인 CSS 또는 CSS modules 쪽이 유리하다.
높은 동적 스타일 요소가 있는 UI: CSS-in-JS가 더 잘 맞는다.
5. 결론
CSS-in-JS는 모듈화와 동적 스타일링에서 강력한 장점을 가진다. 반면 전통적인 CSS 방식은 성능과 단순성 측면에서 여전히 유효하다. 두 방식은 경쟁 관계라기보다는 상호 보완적인 도구로 볼 수 있다. 프로젝트의 특성과 팀의 기술 스택에 따라 적절히 선택하고 혼합 사용하는 것이 이상적이다.