1. Post CSS의 모듈화
성능 :
- 최적화 : CSS Modules는 로컬 범위로 스타일을 제한하여 클래스 이름 충돌을 방지하므로 성능 면에서는 일반적으로 경량하게 사용됨.
- Bundle 최적화 : Webpack과 같은 번들러와 함께 사용할 때, 번들 최적화를 통해 필요한 스타일만을 포함하여 번들 크기를 최소화할 수 있음.
활용성 :
- 지역 범위 제한 : 클래스 이름이 로컬 범위에만 적용되어 스타일을 모듈화하고 재사용성을 높임.
- 프로젝트 유형 : 대형 프로젝트 및 회사 규정에 맞춰야 할 경우에 적합
강점 :
- 고립성 / 독립성
- 순수 CSS
- 입문자에게 제일 좋음
2. Styled Components
성능 :
- 런타임 성능 문제 : Styled Components는 런타임에 스타일을 생성하기 때문에 초기 로딩 속도에 영향을 미칠 수 있음.
- 코드 분할 : 코드 분할을 통해 필요한 스타일만 로드하여 위의 문제를 적절하게 최적화할 수 있음.
활용성 :
- 컴포넌트 형태이기 때문에 React, React-Native 에서만 사용가능함. 다른 프레임워크를 사용시 사용할 수 없음.
강점 :
- 컴포넌트 형태로 만들기에 고립성 / 독립성 보장
- JavaScript를 통한 편의성
- 비스니스 로직과 스타일이 뒤엉켜 가독성이 좋지 않음.
3. Tailwind
성능 :
- 가벼운 런타임 : Tailwind CSS는 빌드 시에 CSS를 생성하므로 런타임에는 가벼움.
- 최적화된 스타일 : 사용하지 않는 스타일을 포함하지 않도록 석박사, 디자이너 전문가들이 최적화를 이뤄냄.
활용성 :
- 쉬운 적용 : 클래스 기반의 스타일 적용 방식으로 기존 HTML에 빠르게 적용할 수 있음
강점 :
- 잘 정의된 디자인 시스템
- 클래스 이름 창작의 괴로움이 줄어들 수 있음
- 태그와 스타일을 함께 쓰기에 편할 수 있지만, 다소 난잡해 보일 수 있음.