.css VS css module VS css-in-JS ( Styled Components VS emotion)

팀 프로젝트를 진행하며 프로젝트 스타일링 방법을 선택하기전 각각의 장점과 단점을 찾아보았다. 이것말고도 더 많은 장단점이 있지만 선택에 중요한 판단이 되고 공감가능한 장단점을 위주로 찾아보았다.

CSS

단점

• 모든 클래스의 이름이 전역적으로 존재하기 때문에 별도의 class 명명 규칙이 필요하다
• 하나의 요소에 여러 css 가 적용될 수 있어, 개발자가 모든 스타일을 기억해야한다.
• js의 상태 값을 공유하기 어렵다.
• css 로드 순서에 따라 우선순위가 달라지기 때문에 css 로드 순서를 기억해야한다.
• 하위 컴포넌트가 부모 컴포넌트의 스타일링에 영향을 받는다.

⇒ 유지보수의 측면에서도, 협업의 측면에서도 단점이 명확함

CSS-in-JS

장점

• class 명이 빌드 타임에 유니크하게 변경되어 명명규칙이 필요없음
• CSS가 컴포넌트 단위로 추상화되기 때문에 CSS간 의존성 고려 필요없음
• JS의 상태 값을 공유할 수 있음 (동적스타일링이 가능)
• CSS가 지역(컴포넌트) 스코프에 적용되므로 우선순위에 따른 문제가 없음
• CSS가 컴포넌트에 격리되어 있기 때문에 상속 문제가 없음

단점

• 번들 크기를 늘린다.
• 렌더링 속도가 느려진다
• CSS 파일이 없으므로 별도의 CSS를 캐시할 수 없다.
• 간단한 스타일에도 상용구 코드가 많다.

⇒ 프로젝트 성능에는 영향을 미치지만 TS와 연결을 자동으로 해준다는 점, 협업을 할 때 따로 명명 규칙을 정하지 않아도 되는점, 스타일이 컴포넌트에 종속되어있다는 점, 동적 스타일링이 가능한 점이 장점이다.

CSS module

장점

• CSS를 JS에 적용하는 것이 쉽다.
• CSS가 지역(컴포넌트) 스코프에 적용된다.

단점

• 전역 스타일 설정이 어렵다.
• TS로 작업하려면 자동/수동으로 인터페이스를 생성해야함

⇒ CSS-in-JS와 장점은 비슷하지만 전역적으로 스타일을 할 때 어렵다는 점, TS로 작업하려면 추가로 손봐야한다는점이 단점이다.

Styled Components VS emotion

• 전반적인 스타일 기능은 동일
• 성능면에서 emotion이 조금 더 가볍고 빠르다.
  • 다만 그렇게 유의미한 차이라고 보기엔 어렵다고 한다.
• emotion
  • css props 기능
    • 인라인 스타일로 작성하면 클래스로 변환된다.
  • 서버 사이드 렌더링 설정시 별도의 추가 설정을 안해도 된다.
  • 파일마다 pragma line을 추가해야한다.

결론

우리 팀의 선택은 CSS-in-JS이다. 프로젝트를 하면서 3명이 일관성있게 코드를 짜기위해 이미 여러 컨벤션이 있는데 class 이름까지 신경쓰는 것은 낭비라 생각했다. 또한 우리 프로젝트는 TypeScript를 적용하기 때문에 따로 설정을 하지 않아도 되는 점이 매력적이었다. 동적 스타일링도 선택의 이유였다. 우리는 사용자가 여러 팀에 속해있을 때 팀별로 색을 다 다르게 보여주기 위해서 동적으로 스타일링이 되어야만 했다.

물론 프로젝트 성능저하라는 단점이 있지만 현재 단계에서는 큰 프로젝트가 아니기 때문에 그정도는 감수할 수 있다고 생각했다.

라이브러리중에는 styled components를 선택했다.

성능면에서는 emotion이 조금 더 가볍고 빠르다. 하지만 큰 차이가 없는데 파일마다 pragma line을 추가해야하는 것은 불필요한 시간낭비라고 생각했다.(까먹을 수도 있으니 말이다). 또한 이모션의 가장 큰 장점이라고 생각하는 서버 사이드 렌더링 관련해서 우리는 필요없을 것이라고 판단했기 때문이다.