CSS-in-CSS
그동안 작성해온 CSS 작성 스타일은 대부분 JS와 CSS를 분리하고 모듈로 연결해서 사용했었을 겁니다. 이 방식을 CSS-in-CSS라고 합니다.
모듈화된 CSS는 클래스 네임 중복을 방지해주는 등 중복 문제와 관리의 위험성을 낮춰주었습니다. 하지만 여러 CSS 파일들로 나누어서 작성하고 관리했기 때문에, 프로젝트 규모가 커질수록 수 많은 CSS 파일이 생성되고 이는 관리를 어렵게 만든다는 문제점을 갖고 있습니다.
CSS-in-JS
CSS-in-JS는 CSS 작성 스타일 중 하나로 자바스크립트 코드 내부에서 CSS 스타일을 작성하는 기법을 의미합니다.
CSS-in-JSS는 2014년 페이스북의 개발자 Christopher Chedeau aka Vjeux가 발표했습니다.
Vjeux는
CSS-in-JS로 다음과 같은 문제를 해결할 수 있다고 언급했습니다.
- Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요
- Dependencies: CSS간의 의존 관계를 관리
- Dead Code Elimination: 미사용 코드 검출
- Minification: 클래스 이름의 최소화
- Sharing Constants: JS와 CSS의 상태 공유
- Non-deterministic Resolution: CSS 로드 우선 순위 이슈
- Isolation: CSS와 JS의 상속에 따른 격리 필요 이슈
이처럼 CSS-in-JS는 기존의 모듈 방식에서 여러 문제들을 해결해주었고, React.js나 Vue.js등 컴포넌트 기반의 라이브러리가 등장하고 인기를 끌게 되면서 점점 많이 사용하고 있는 추세가 되었습니다.
가장 많이 사용하는
CSS-in-JS라이브러리로는 styled-components가 있습니다.
물론 CSS-in-JS가 장점만 갖고 있는 것은 아닙니다. 그랬다면 CSS-in-JS는 사장된 기술이 되었겠죠.
CSS-in-JS를 사용하려면 라이브러리를 설치해야 하는데, 이 경우 프로젝트의 크기가 커지게 됩니다. 또한 각 라이브러리 사용법을 숙지하고 사용해야 하므로 CSS + 라이브러리를 공부해야하는 문제점도 발생하게 됩니다.
또 다른 문제점으로는 자바스크립트 코드에 내장된 CSS 코드를 읽어들인 후 해석해서 화면에 보여주기 때문에 CSS 파일을 직접 사용하는 방식보다 느린 경우가 있습니다.
간단한 디자인의 경우는 큰 영향을 미치지 않지만, 복잡하고 많은 디자인이 적용된 페이지에선
CSS-in-JS방식이 느려질 수도 있습니다.
그렇다면 무엇을 선택해야 하는가
정답은 없습니다.
CSS-in-JS는 컴포넌트가 중심이거나, 간단한 프로젝트에서 강세를 보일 것입니다.
반면, CSS-in-CSS는 더 동적이고 상호작용이 많은 화려한 디자인을 채택하는 프로젝트에서 강세를 보일 것입니다.
이처럼 각 방식에 따른 장단점이 명확하기 때문에 개발하는 프로젝트의 특성을 살펴본 후에 어떤 방식의 CSS 기법을 적용할지를 결정하는 것이 좋다라고 할 수 있습니다.
