CSS-in-CSS vs CSS-in-JS

CSS-in-CSS

CSS 모듈

CSS 모듈은 CSS를 모듈화해 사용하는 방식이다. CSS 클래스를 만들면 자동으로 고유한 클래스네임을 만들어서 scopre를 지역적으로 제한한다. 모듈화된 CSS를 번들러로 불러오면 사용자가 정의했던 클래스네임과 고유한 클래스 네임으로 이루어진 객체가 반환된다. 그리고 그 클래스 이름은 3가지로 잘라볼 수 있다.

• cat: 파일명
• meow: 로컬 클래스명
• j3xk: 랜덤 해시

이처럼 CSS 모듈은 동일 프로젝트 소스 안에서 CSS 이름이 중복되도 unique한 이름을 제공한다.
그럼 className="cat_meow_j3xk 라고 직접 작성하는 것도 아닌데 어떻게 unique한 이름을 가져올 수 있을까?

JavaScript Object에는 key로 meow를 가지고 있으며 이는 CSS 모듈에서 선택한 클래스 이름과 일치한다. object.meow는 새로 생성된 클래스명을 자신의 원래 클래스명을 매핑하여 가져오게 된다.

unique한 이름을 제공하기 때문에 원래 local scope이라는 개념이 없는 CSS 생태에서 local scope 처럼 사용할 수 있다는 장점이 있다. 다만, 한 곳에 모든 것을 작성하지 않기 때문에 별도로 많은 CSS 파일을 만들어 관리해야하는 단점도 있다.

CSS-in-JS

CSS-in-JS는 단어 그대로 자바스크립트 코드에서 CSS를 작성하는 방식을 뜻한다. JS를 CSS로 변환해주는 컴파일러는 JS를 CSS로 전환하는 고성능 컴파일러로, 런타임 및 서버 사이드에서 작동하며 프레임워크에 구애받지 않는다.

어차피 JS로 작성하는거면 인라인 스타일과 동일하다고 생각할 수 있는데 둘은 다르다.

인라인 스타일은

const textStyles = {
  color: white,
  backgroundColor: black
}

<p style={textStyles}>inline style!</p>

위처럼 코드를 작성하면 브라우저에서 DOM 노드에 아래처럼 반영된다.

<p style="color: white; backgrond-color: black;">inline style!</p>

반면 CSS-in-JS의 경우

import styled from 'styled-components';

const Text = styled.div`
  color: white,
  background: black
`
<Text>Hello CSS-in-JS</Text>

이렇게 작성하면 브라우저에선 아래처럼 반영된다.

<style>
.hash136s21 {
  background-color: black;
  color: white;
}
</style>

<p class="hash136s21">Hello CSS-in-JS</p>

요약하면, CSS-in-JS는 DOM의 상단에 <style> 태그를 추가했고, 인라인 스타일은 DOM 노드에 속성으로 추가했다. 이 차이가 중요한 이유는 무엇일까?

모든 CSS 기능을 JS 이벤트 핸들러로 지정할 수 있는게 아니다. 많은 sudo selector(:hover, :before 등등)도 불가능하고 html, body 태그 등도 지원하지 않는다.

하지만, CSS-in-JS를 사용하면, CSS의 모든 기능을 사용할 수 있다. 그리고 라이브러리를 활용하게 된다면 확장된 기능들도 사용할 수 있다. CSS는 컴포넌트 기반의 방식을 위해 만들어지지 않았고 여기서 생기는 단점을 CSS-in-JS가 보완한다.

장점만 있는거 같지만 Learning curve가 있다는 점, 새로운 의존성이 생긴다는 단점도 있다.
CSS-in-JS가 많이 쓰이곤 있지만 여전히 뜨거운 감자라고 한다. 각각의 장단점을 잘 파악해보며 자신이 하는 프로젝트에 잘 맞는 걸 골라서 쓰면 좋을 것 같다.

참고자료

https://www.samsungsds.com/kr/insights/web_component.html
https://d0gf00t.tistory.com/22
https://www.javascriptstuff.com/what-are-css-modules/