Tailwind CSS에서 Vanilla CSS로의 전환, CSS 구조화 경험 공유
by DD
2개월 전
조회수 20
저자는 Tailwind CSS 사용 경험을 바탕으로, Vanilla CSS로의 전환을 통해 CSS 구조화에 대한 새로운 시각을 제시함
컴포넌트 기반 CSS 구조를 통해 코드의 가독성과 유지보수성을 향상시키고, Tailwind의 유틸리티 클래스 방식의 한계를 극복함
CSS Grid를 활용한 반응형 디자인 구현, 빌드 시스템(Build System) 없이 CSS를 사용하는 방법을 소개함
Tailwind CSS의 빌드 시스템 의존성과 유연성 부족을 지적하며, Vanilla CSS의 장점을 강조함
컴포넌트 기반 CSS 구조화
저자는 Vanilla CSS로 전환하며 컴포넌트 기반 CSS(Component-Scoped CSS) 구조를 채택하여 코드의 가독성과 유지보수성을 높였다. 각 컴포넌트는 고유한 클래스를 가지며, 해당 컴포넌트의 CSS는 다른 컴포넌트에 영향을 미치지 않도록 설계되었다. 이러한 방식은 유틸리티 클래스(Utility Class)의 과도한 사용으로 인한 복잡성을 줄이고, 컴포넌트별로 독립적인 스타일 관리를 가능하게 한다.
Tailwind CSS의 한계와 Vanilla CSS의 장점
게시물에서는 Tailwind CSS의 빌드 시스템 의존성(Build System Dependency)과 유연성 부족(Lack of Flexibility)을 지적하며 Vanilla CSS의 장점을 강조한다. Tailwind는 특정 스타일을 쉽게 적용할 수 있지만, 복잡한 레이아웃이나 사용자 정의 스타일을 구현하는 데 제약이 있을 수 있다. 반면, Vanilla CSS는 CSS Grid와 같은 최신 기능을 활용하여 더욱 유연하고 강력한 스타일링을 가능하게 한다.
반응형 디자인 구현: CSS Grid 활용
저자는 Tailwind의 `md:text-xl`과 같은 미디어 쿼리(Media Query) 기반의 반응형 디자인 대신, CSS Grid(CSS Grid)를 활용한 유연한 레이아웃을 구현했다. 특히 `grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content))`와 같은 속성을 사용하여 화면 크기에 따라 자동으로 컬럼 수를 조절하는 방법을 소개한다. 이는 Tailwind에서는 구현하기 어려운 동적 레이아웃(Dynamic Layout)을 가능하게 한다.
CSS 빌드 시스템(Build System)의 선택
저자는 Vanilla CSS를 사용할 때, esbuild를 사용하여 CSS를 번들링하는 방법을 제시한다. esbuild는 웹 표준 기반이며, Go 언어로 작성되어 빠르고 가볍다는 장점이 있다. 하지만, 개발 환경에서는 CSS의 import 문(Import Statements)과 중첩 선택자(Nested Selectors)를 활용하여 빌드 시스템 없이도 CSS를 사용할 수 있다고 설명한다. 이는 개발 생산성을 높이는 데 기여한다.
