CSS-in-JS

기술의 분리가 관심사의 분리를 의미하지는 않는다. 아래 예제 코드는 react로 작성될 예정이다.

CSS-in-JS는 자바스크립트를 사용하여 구성 요소의 스타일을 지정하는 방법중 하나이다. 자바스크립트를 사용하여 스타일을 좀 더 선언적이고, CSS를 문서 레벨이 아닌 컴포넌트 레벨로 추상화될 수 있게 해준다.

Inline-css vs CSS-in-JS

문득 인라인 css를 사용하면 자바스크립트랑 css랑 같이 사용할 수 있지 않는데, CSS-in-JS가 왜 필요하나 싶을 수도 있다.

Inine

function InlineCSS() {
  return <div style={{color: red}}>red</div>
}

// 브라우저
<div style="color: red">red</div>

CSS-in-JS

const RedDiv = styled.div`
  color: red;
`;
<RedDiv>red</RedDiv>

// 브라우저
<style>
.hash223a56 {
  color: red
}
</style>

<div class="hash223a56">red</div>

위에 예제에서 볼 수 있듯이 Inline-css의 경우 DOM 노드에 인라인으로 스타일이 추가되며, CSS-in-JS는 DOM 상단에 <style> 태그를 추가하고 class를 통해 스타일을 제어한다.

이것을 갑자기 보여준 이유는 위의 결과를 통해, 인라인 스타일을 사용할시 미디어 쿼리, 의사 클래스(pseudo-classes)를 사용할 수 없음을 알 수 있다.

CSS-in-JS의 장점

1. 클래스 이름을 짓는 행위를 CSS-in-JS 라이브러리에게 위임함으로서 클래스명의 중복, 철자 오류 등으로 부터 벗어날 수 있다. 물론 BEM 등을 통해 해결하면 되지 않을까 싶지만, 서드 파티 라이브러리와 통합이 될 경우는 이를 해결하기 어렵다.

2. 각각의 스타일은 특정 컴포넌트에 바로 연결되어 있기 때문에 해당 스타일이 어디에서 사용되는지 쉽게 알 수 있다.

3. 동적 스타일링을 위해 여러 클래스를 만들 필요가 없고, 컴포넌트의 상태에 따라 직관적으로 동적 스타일을 적용할 수 있다.

4. 재사용 가능한 스타일을 별도의 변수로 관리하거나 적용할 수 있다. 즉 Javascript와 CSS 간에 상수와 함수를 쉽게 공유할 수 있다.

5. 많은 CSS-in-JS 라이브러리에서 벤더 프리픽스를 자동으로 넣어주기 때문에 이를 고민할 필요가 없으며, 사용하지 않는 코드는 알아서 제거해준다.

6. CSS 유닛 테스트가 가능하다. [예시]

7. 현재 화면에 사용중인 스타일만 DOM에 존재하게 된다.

8. 기존의 스타일링 방법과 병행해서 사용해도 되기 때문에 중간에 도입을 결정하더라도 전역적으로 영향을 미치지 않는다.

CSS-in-JS의 단점

1. 새로운 의존성 추가, 번들 사이즈 증가 (but 라이브러리별로 다를 수는 있지만 의외로 번들 추가되는 번들 사이즈는 매우 작을 수 있다.)

2. 러닝 커브 - css class를 이용하여 동적으로 상태를 변경하다가 컴포넌트의 상태를 통해 변경하는 것이 익숙치 않다.

사용해봤던 CSS-in-JS 라이브러리

emotion, styled-components

직접 프로덕션에서 사용해본 라이브러리가 사실 이 두개이기도 하지만, 둘 다 러닝커브가 낮고 사용성이 좋았다. emotion 같은 경우 번들 사이즈도 매우 작고, 인라인 스타일링도 지원하기 때문에 특히 더 좋았던거 같다.