CSS-in-JS 의 대안 (Css-in-CSS + Tailwind)

제가 처음 웹개발을 시작할때만 해도 HTML 문서에서, 순수하게 CSS 로 작업을 했었는데요. 프론트엔드 개발 환경이 발전하면서 CSS 도 프로그래밍 스럽게 관리할수 있는 CSS 모듈을 활용한 전처리기 Pre-Processor (sass, less) 가 인기를 얻었습니다. 그러다가 컴포넌트 개발 방식이 도입 되면서 최근에는 많은 프로젝트 에서 emotion 이나 styled-components 같은 CSS-in-JS 를 많이 사용하고 있는데요. CSS-in-JS 는 자바스크립트로 CSS 를 관리할수 있습니다. JSX 는 마크업과 스크립트 를 동시에 작성할수 있게 하여서 '컴포넌트' 유닛으로 관심사를 분리하였는데요. CSS-in-JS 는 JSX 에 더해서 CSS 까지 포함할수 있게 해줍니다. (JSX + C? 흠.. 적다보니 vue 스럽기도 하군요) CSS in JS 는 어떤 장단점이 있을까요? 장점. 1. Locally-scoped styles(좁은 지역 범위 스타일) : CSS 는 전역적으로 관리 되어서 중복 적용 되어 실수할 가능성이 큽니다. 이를 해결하기 위해 더 긴 클래스 이름이나 구체적인 css selector 를 사용해야 하는데요. 이는 개발자의 몫이고 어렵지는 않지만 조금 번잡스러울수 있습니다. 하지만 Css-in-JS 는 Local 범위로 구성이 되기 때문에 이러한 문제를 해결해줍니다. 2. Co-location: 코드를 구성하는좋은 방법중 하나는, 단일 구성 요소와 관련된 파일을 같은 위치에 포함하는 것입니다. CSS 는 위치에 관계없이 전역적으로 적용 되기 때문에 Co-location 을 구현하기 어렵습니다. CSS-in-JS 는, JavaScript 로 관리 되기 때문에 컴포넌트 레벨에서 모듈화가 가능합니다. 3. Sharing Constants: JavaScript 와 CSS 간에 상태나 함수 공유가 가능합니다. 4. Dead Code Elimination: JavaScript 로 개발하기 때문에, 미사용 코드 검출 용이 합니다. CSS 는 사용되지 않는 코드를 검출 하지 못합니다. 5. HTML, CSS, JavaScript 와 같이 커다란 단위의 목적을 기준으로의 분리가 아닌, 스타일을 포함한 컴포넌트 단위로 분리가 가능합니다. 단점. 1. Runtime overhead: 자바스크립트 해석 과정이 필요하기 때문에, CSS 로 변환되고 Document 에 삽입 되면서 추가적인 CPU 를 사용합니다. 2. 번들 사이즈 증가: CSS-in-JS 를 사용하려면 해당 라이브러리를 다운로드 해야 하며 이는 런타임 bundle 사이즈의 증가를 의미합니다. 3. Clutters React DevTools: 각각의 CSS-in-JS 속성들이 ReactDevTool 에 포함됨으로써, 디버깅 가독성을 저하 시킵니다. 4. 느린 렌더링 속도: CSS-in-JS 는 렌더링되는 구성요소가 굉장히 많고, 런타임에 스타일을 생성하기 위한 동작이 일어납니다. 국, 내외 여러 블로그 글을 참고 해보면 CSS-in-CSS 보다 약 50% 정도 더 느린걸로 보입니다. 최근에는 이러한 단점들 때문에 CSS-in-CSS (scss) + 유틸리티 클래스(Tailwind, Bootstrap) 의 도입도 논의되고 있습니다. CSS-in-JS 의 이점을 유지하면서도 일반 CSS 와 유사한 성능을 가진 스타일링 시스템을 어느정도는 구축할수 있다고 합니다. 모든 기술에는 장단점이 있습니다. 이러한 장단점을 명확히 인지하고 라이브러리가 넘쳐나는 웹개발 환경에서 프로젝트에 적합한 적정 기술을 선택 하는 것도 모던 엔지니어의 능력중 하나인것 같습니다.