CSS 방법론의 발전 (Feat. Utility-First CSS, SSR)

1. 전통적인 CSS에서 OOCSS, BEM으로의 발전

🕰 1990~2010년대 초반

OOCSS (Object-Oriented CSS, 2009)

• CSS의 재사용성을 높이기 위해 구조(Structure)와 스킨(Skin)을 분리하는 방식.

BEM (Block-Element-Modifier, 2010)

• 명확한 네이밍 규칙(block__element--modifier)을 사용하여 스타일 충돌을 방지하고 유지보수성을 개선.

🔥 장점: CSS 코드의 구조화, 재사용성 증가

⚠️ 단점: 클래스 이름이 길어짐, HTML에 의존적

2. Utility-First CSS와 Atomic CSS의 등장

🕰 2010년대 중반

🚀 Utility-First CSS (ex: Tailwind CSS)

• 재사용 가능한 유틸리티 클래스(예: text-red-500, p-4, flex, grid)를 사용하여 CSS를 최소화.
• CSS를 직접 작성하기보다, 미리 정의된 클래스를 조합하여 스타일 적용.

대표적인 프레임워크:

• Tailwind CSS
• Bootstrap Utility Classes

🔥 장점: 빠른 개발 속도, 클래스 기반 스타일 적용, 반복적인 CSS 제거

⚠️ 단점: HTML이 복잡해질 수 있음, 클래스 네이밍 학습 필요

🚀 Atomic CSS (ex: ACSS, Tachyons)

• "한 클래스 = 한 스타일 규칙" 원칙을 따르는 CSS 방식.
• 예: .p4 { padding: 1rem; }, .bg-blue { background-color: blue; }

• Tailwind는 기본적으로 Atomic CSS에 유틸리티 클래스를 추가한 개념.
• Atomic CSS는 가능한 한 CSS 파일을 줄이고, 인라인 스타일과 비슷한 방식으로 작동.

🔥 장점: 극단적인 코드 재사용성, 파일 크기 최소화

⚠️ 단점: 스타일을 변경할 때 클래스 변경이 필요, 학습 곡선 존재

3. CSS-in-JS의 등장과 확산

🕰 2016년~

🚀 CSS-in-JS (ex: Styled Components, Emotion)

• JavaScript 파일 내에서 CSS를 직접 정의하고 관리하는 방식.
• styled-components처럼 템플릿 리터럴을 활용하여 스타일을 적용.

import styled from "styled-components";

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

• Styled Components
• Emotion
• Stitches

4. Functional CSS의 개념

🕰 2020년대~

🚀 Functional CSS (ex: Tailwind, WindiCSS)

• CSS 속성을 조합하는 유틸리티 스타일링 방식.
• flex items-center justify-between p-4 bg-gray-200 같은 조합 사용.
• Tailwind CSS와 같은 프레임워크가 대표적.

🔥 장점: CSS 파일 크기 감소, 유지보수 용이, 재사용성 증가

⚠️ 단점: 클래스 네이밍 규칙 학습 필요, 디자인 시스템과 충돌 가능

5. CSS 방법론 비교 정리

6. 결론: 어떤 CSS 방법론을 선택해야 할까?

• 대규모 프로젝트 → BEM + Utility-First CSS 조합 추천
• React/Vue 기반 프로젝트 → CSS-in-JS 사용 가능 (Emotion, Styled Components)
• 빠른 개발이 필요한 프로젝트 → Tailwind CSS 추천
• 최소한의 스타일로 최적화 → Atomic CSS 고려
• Server-Side Rendering(SSR) → Utility-First CSS (Tailwind CSS), Atomic CSS, CSS Modules 추천

• 기본적으로 styled-components와 emotion은 SSR을 지원하지만, 초기 렌더링 시 스타일이 적용되지 않는 문제(Flickering Issue) 가 발생할 수 있습니다.
• 이를 해결하기 위한 방법으로 서버에서 스타일을 미리 생성하는 SSR 설정이 필요하며, Next.js와 함께 사용할 경우 ServerStyleSheet 같은 기능을 추가해야 합니다.

• Tailwind CSS 또는 Atomic CSS처럼 사전 생성된 CSS 클래스 기반 접근 방식이 유리함
• CSS Modules을 활용하여 각 컴포넌트에 독립적인 스타일 적용 가능