CSS 어떤 방식이 좋을까?
HTML(Hypertext Markup Language)이 처음 등장한 1991년에는 CSS(Cascading Style Sheets)가 없었습니다. 웹 이용자들이 늘어나면서 디자인에 대한 요구가 커졌고 웹 고안자들은 HTML을 꾸며주는 언어의 필요성을 공감하게 되었습니다. 그렇게해서 CSS가 나오게 됩니다.
하지만 웹이 점점 복잡해지고 동적 기능 요구가 증가하면서 HTML과 CSS만으로는 화면의 모든 스타일을 제어하는 것은 어려워졋습니다.
이를 해결하기 위한 여러 가지 웹 애플리케이션 스타일 구성 방식 크게 두 갈래로 나눠지게 됩니다. 바로 CSS-in-JS와 CSS-in-CSS 입니다.
css-in-css
CSS코드를 모듈화하여 사용하는 방식입니다. CSS와 클래스 이름을 만들어 스코프를 지역적으로 제한하면서, 모듈을 불러옵니다. 이 과정에서 개발자가 지정했던 클래스 이름과 객체가 반환되는 방식으로 작동하게 됩니다.
모듈화 되지 않은 CSS를 사용하게 된다면 협업 과정에서 클래스 이름이 겹치게 될 때, 스코프 오염이 일어날 수 있는데, 모듈화에선 CSS 클래스 이름이 중복되어도 새로운 이름이 입혀저 중복 및 관리의 위험성이 적어지게 된다. 다만, 여러 파일에 나뉘어서 작성하기 때문에 많은 CSS 파일을 만들어 관리해야하는 단점이 있게 됩니다.
css-in-js
CSS-in-js는 자바스크립트 코드로 CSS를 작성하는 방식입니다. 2014년 처음 나오게 됐고, 다음과 같은 문제를 해결하기 위해 나온 기술입니다.
- Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요
- Dependencies: CSS간의 의존 관계를 관리
- Dead Code Elimination: 미사용 코드 검출
- Minification: 클래스 이름의 최소화
- Sharing Constants: JS와 CSS의 상태 공유
- Non-deterministic Resolution: CSS 로드 우선 순위 이슈
- Isolation: CSS와 JS의 상속에 따른 격리 필요 이슈
이 방법을 사용하기 위해 여러 라이브러리가 출시 되었고, 대표적으로는 styled-components, emotion 등의 라이브러리가 있습니다.
기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있는 추세입니다.
css-in-js 장단점
해당 방법을 사용한다면, CSS파일의 유지보수가 필요 없어집니다. 컴포넌트 레벨로 추상화하기 때문에 단일 파일에서 관리가 가능합니다. 또한 javascript의 코드를 활용할 수 있습니다.
해당 DOM에서만 활용할 수 있는 것도 장점으로 꼽을 수 있습니다. 또한 자바스크립트와 CSS 사이에 있는 상수와 함수를 공유할 수 있습니다. 거기에다 스타일링을 위한 코드 사용량이 줄어들게 됩니다.
그러나 러닝커브가 높다는 단점이 있습니다. 또한 별도의 라이브러리가 필요해서 크기가 커질 수 있고, 디자인 페이지를 작업한다면 CSS 모듈 방식에 비해 느린 성능을 보여줄 수 있습니다.
성능면에서 차이가?
얼핏보면 css-in-js가 훨씬 많은 장점이 있는 것처럼 보입니다. 그러나 모든 기술 선택에는 근거가 명확해야합니다. 아무리 좋은 기술이더라도, 단점은 있기 마련이니까요.
styled component는 어찌됐건 자바스크립트 해석 과정이 필요해서, 성능 면에서는 Css모듈을 읽어오는 것보다 시간이 조금 더 많이 걸리는 것이 사실이기 때문입니다.
어떤 방식이 좋은 방법이라고 꼽을 순 없지만, 작업자의 성향에 따라 효율성과 컴포넌트 위주의 프로젝트를 진행다면 css-in-js가 더 효율적입니다. 필요한 부분의 스타일 요소만 렌더링하기 때문입니다.
반면 사용자 편의에 중점을 둔 인터렉티브, 디자인 웹 프로젝트라면 CSS 스타일 요소를 로딩하는 방식이 적합하다고 생각합니다.
참고
- [번역] CSS-in-JS에 관해 알아야 할 모든 것 https://d0gf00t.tistory.com/22
- css in js는 무조건 더 좋을까?
https://jthcast.dev/posts/is-css-in-js-the-best/ - 웹 컴포넌트 스타일링 관리 : CSS-in-JS vs CSS-in-CSS
https://www.samsungsds.com/kr/insights/web_component.html
