𝗧𝗮𝗶𝗹𝘄𝗮𝗶𝗻𝗱 𝗖𝗦𝗦𝟰: 𝗨𝘁𝗶𝗹𝗶𝘁𝘆 𝗦𝘁𝘆𝗹𝗲𝘀가 더 잘 확장되는 이유
많은 개발자들이 HTML에서 유틸리티 클래스를 보는 것을 싫어합니다. 지저분해 보이기 때문입니다. 피해야 한다고 배웠던 예전의 인라인 스타일처럼 보입니다. 마치 퇴보하고 있다는 생각이 들 수도 있습니다.
하지만 전통적인 CSS는 다른 문제를 일으킵니다.
5,000줄짜리 스타일시트를 상상해 보세요. 개발자 A가 2년 전에 클래스를 작성했습니다. 개발자 B는 아주 작은 부분을 수정하고 싶어 합니다. 하지만 개발자 B는 기존 클래스를 건드리는 것이 두렵습니다. 이 수정이 숨겨진 페이지에 영향을 미칠지 알 수 없기 때문입니다. 그래서 대신 새로운 클래스를 만듭니다.
이는 두 가지 주요 문제를 야기합니다:
- 기능을 추가할 때마다 CSS 번들 크기가 커집니다.
.card-body-flex-inner와 같은 이름을 짓는 데 수 시간을 허비하게 됩니다.
Tailwind CSS는 이러한 접근 방식을 바꿉니다. bg-mint-500이나 p-4와 같은 유틸리티 클래스를 사용합니다. 이 방식은 두 가지 주요 이점을 제공합니다:
더 작은 번들 크기 앱 전체에서 동일한 클래스를 재사용합니다. CSS 파일 크기가 프로젝트 규모에 따라 선형적으로 증가하지 않습니다. 페이지가 10개든 10,000개든 CSS 크기는 작게 유지됩니다.
더 안전한 리팩터링 요소에 대한 모든 스타일이 해당 컴포넌트 내에 존재합니다. 컴포넌트를 삭제하면 스타일도 함께 삭제됩니다. 실수로 다른 페이지의 사이드바를 망가뜨리는 일은 없을 것입니다.
가독성에 대해 의문이 생길 수도 있습니다.
현대적인 웹 개발에서는 React나 Vue와 같은 컴포넌트를 사용합니다. 하루 종일 지저분한 HTML을 들여다보고 있지 않습니다. 컴포넌트 스타일을 한 번 지정하면, 메인 레이아웃에서는 <Card />와 같이 깔끔한 태그를 사용하게 됩니다.
지저분한 세부 사항은 컴포넌트 파일 내부에 머뭅니다. 메인 아키텍처는 깔끔하고 예측 가능한 상태를 유지합니다.
우리는 더 나은 유지보수를 위해 깔끔한 마크업을 포기했습니다. 안정적인 프로덕션 시스템을 보장하기 위해 개발 단계에서의 지저분한 코드를 수용하는 것입니다.
여러분은 CSS를 어떻게 관리하시나요? 유틸리티 클래스를 좋아하시나요?