🎨 프론트엔드 스타일링 전략 비교: CSS Module vs Tailwind vs Styled-Components

세 가지 스타일링 방법과, CSS-in-JS, JS-in-CSS 정리

🔹 1. CSS Module

✅ 개요

• 일반 CSS 파일을 모듈 단위로 불러와 컴포넌트에 국한된 스타일을 적용
• 클래스명이 자동으로 해시 처리되어 글로벌 충돌 방지

/* Button.module.css */
.btn {
  color: white;
  background: blue;
}

import styles from './Button.module.css';

<button className={styles.btn}>Click me</button>;

✅ 장점

• 설정이 간단하고 기존 CSS 지식 재사용 가능
• 글로벌 클래스 충돌 없음 (scoped 처리)
• 빌드 없이도 디버깅 쉬움 (크롬 DevTools에서 확인 쉬움)

🚫 단점

• 조건부 스타일링이 불편
• CSS 동적 처리나 테마 적용이 어려움
• 로직과 스타일이 분리되어 유지보수 복잡해질 수 있음

🔹 2. Tailwind CSS

✅ 개요

• 유틸리티 클래스 기반의 Atomic CSS 프레임워크
• JSX 안에 직접 클래스명을 기입해 스타일 적용

<button className="rounded bg-blue-500 py-2 px-4 text-white">Click me</button>

✅ 장점

• 빠른 개발 속도와 프로토타이핑
• CSS 파일 작성 거의 없음
• 디자인 시스템과 궁합 좋음
• 모바일 반응형 (sm:, md:) 처리 간편

🚫 단점

• HTML이 클래스명으로 지저분해 보일 수 있음
• 커스터마이징이 초기엔 까다로움
• 기존 CSS 유경험자에겐 진입 장벽

🔹 3. Styled-Components

✅ 개요

• CSS-in-JS 대표 라이브러리
• JS 안에서 CSS를 정의하고 컴포넌트 단위로 관리 가능

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 0.5rem 1rem;
`;

✅ 장점

• props 기반 조건부 스타일링 매우 유연
• 로직 + 스타일 + 테마 모두 컴포넌트 단위에서 처리 가능
• 디자인 시스템 구성에 적합

🚫 단점

• 런타임에 스타일이 생성되어 성능 이슈 발생 가능
• 클래스명이 디버깅하기 어렵게 나올 수 있음
• 번들 사이즈 증가 요인이 될 수 있음

🧠 CSS-in-JS vs JS-in-CSS?

✅ CSS-in-JS

JavaScript 코드 안에 CSS를 작성하는 방식

• 대표: Styled-Components, Emotion, Stitches
• 장점: 동적 스타일링, 테마 시스템, 컴포넌트 기반
• 단점: 런타임 오버헤드, 스타일 격리 이슈

✅ JS-in-CSS

CSS에서 JS 기능(변수, 조건문 등)을 사용하는 방식
(정확히는 CSS preprocessor들이 해당)

• 대표: SASS/SCSS, PostCSS
• 예: 변수, 믹스인, 조건문 등을 사용
• 장점: 정적 스타일링과 변수 활용이 유리
• 단점: 동적 상태 기반 스타일링엔 한계 있음

✨ 결론

• 빠른 개발 + 디자인 시스템 = Tailwind
• 동적 스타일, 테마 기반 구조화 = Styled-Components
• 기존 CSS에 익숙하고, 간단하게 하고 싶다면 = CSS Module