CSS in JS vs CSS Modules

요즘 새로운 회사 일로 인해 두 가지에 대해서 조사할 일이 생겼다.
디자인 시스템에서는 어떤 라이브러리가 합리적일 지 고민했던 흔적을 글로 남기고자 한다.

Design System Pattern 개발의 필요한 점

개발에 앞서 생각하기에 나의 중요한 점을 적어봤다.

• 전달된 props를 style로 바꿔서 내보낸다.
• 여러 props의 상황에 유연하고 가독성있게 개발해야한다.
• 뷰포트에 처리가 쉬워야한다.

Run-time 방식 vs Build-time 방식

• Run-time 방식
  • JS에서 변수를 스타일 내부로 직접 넣어서 사용할 수 있다.
• Build-time 방식
  • 빌드 시 CSS를 하나로 모아, CSS 파일로 떨궈지게 된다.
  • 서비스 사용자는 초기에 1번만 CSS 파일을 로드함으로써 퍼포먼스가 저하되는 경우는 발생하지 않는다.
  • 단 CSS의 크기가 커지면 문제가 된다.
• 이 블로그에서 잘 설명되어 있다.

CSS-in-JS vs CSS-modules

결국엔 둘 다 네이밍의 불편함때문에 나왔다. 해쉬를 적용해 중복 스타일 적용을 방지한다.

• CSS-in-JS

  • 장점
    • 개발자 친화적이다. (빠른 개발 속도를 자랑, 가독성, 태그의 가독성 증가)
      
  • 단점
    • js의 번들링 사이즈 증가한다.
    • 브라우저는 초기 styled-components가 구문 분석 후 DOM에 추가할 때까지 스타일 해석을 진행하지 않아 렌더링 속도가 느려진다.
    • stylelint 사용이 불가하다.
      • 찾아보지는 않았지만 비슷한 역할을 해주는 라이브러리가 존재한다고 한다.
    • 캐싱이 되지 않는다.

• CSS-Modules

  • 장점
    • 빌드 시 css 파일이 생성되기에 캐싱 사용 가능하다.
  • 단점
    • 각 props 상황에 따른 className 정의가 힘들다.
      • classnames 라이브러리로 극복가능할 것 같다.

결론

• 디자인 시스템 자체는 많은 프로젝트에 의존성을 가지게 하기 때문에 굉장히 core하고 성능이 좋아야한다고 생각한다.
• 따라서 CSS-modules로 성능을 좋게 만드는 것이 좋을 것 같다. (초기 렌더링 속도 증가)
• 제일 좋은 방법은 초기 렌더링 때 쓰이는 css 파일을 빠르게 보내줘 CSSOM을 생성하고 javascript를 통해 동적으로 style을 생성해주는게 좋지 않을까싶다.