CSS-in-JS, 전처리기는 이제 그만! 컴포넌트 기반 CSS 스타일링
by DD
3개월 전
조회수 22
기존 CSS 솔루션의 문제점을 지적하며, 컴포넌트 기반 스타일링(Component-based Styling)의 필요성을 강조함
각 컴포넌트에 고유한 컨테이너 클래스(Container Class)를 부여하고, CSS 변수(CSS Variables) 활용을 통해 스타일 관리
CSS-in-JS, 전처리기(Preprocessors) 등 불필요한 도구 사용을 지양하고, Svelte의 컴포넌트 스타일링 방식을 언급
컴포넌트 기반 CSS 아키텍처
본문에서는 각 컴포넌트에 고유한 클래스명(Class Name)을 부여하고, 해당 클래스 내부에 모든 스타일을 정의하는 방식을 제안한다.
CSS 변수(CSS Variables) 활용: 테마(Theme) 및 전역 스타일(Global Style) 관리를 용이하게 함
컨테이너 쿼리(Container Queries) 및 태그 선택자(Tag Selectors) 사용: 컴포넌트 내부 스타일링 유연성 확보
불필요한 도구 제거: CSS-in-JS, 전처리기(Preprocessors) 등 빌드 타임(Build Time) 복잡성 감소
CSS-in-JS의 대안: 네이티브 CSS 활용
글쓴이는 CSS-in-JS 방식의 단점을 지적하며, 네이티브 CSS(Native CSS)의 장점을 강조한다.
CSS-in-JS의 문제점: 런타임(Runtime) 성능 저하, 스타일 격리(Style Isolation) 어려움
네이티브 CSS의 장점: 단순성(Simplicity) 및 유지보수성(Maintainability) 향상, 브라우저(Browser)의 최적화 활용
Svelte의 CSS 처리 방식: 컴포넌트별 고유 ID 생성, 네이티브 CSS에 가까운 방식
결과적으로, CSS-in-JS는 복잡성을 증가시키고, CSS의 본질적인 장점(Core Benefit)을 훼손할 수 있다.
CSS 최적화 및 유지보수 전략
본문에서는 CSS 최적화(CSS Optimization)를 위해 불필요한 도구 사용을 지양하고, CSS 집계(Aggregation) 및 최소화(Minification)를 권장한다.
CSS 집계 및 최소화: HTTP 요청(HTTP Request) 감소 및 페이지 로딩 속도(Page Loading Speed) 향상
사용하지 않는 CSS 제거 금지: 빌드 타임(Build Time)에 CSS 클래스 제거 시, 잠재적인 문제 발생 가능성(Potential Issue)
Svelte의 CSS 처리 방식: 컴포넌트별 고유 ID 생성, 네이티브 CSS에 가까운 방식
결론적으로, CSS는 단순하고 직관적으로 관리해야 하며, 과도한 최적화(Over-optimization)는 오히려 해가 될 수 있다.
