CSS in JS 라이브러리 "emotion"의 권장 사항

요즘은 리액트/넥스트에서 스타일링을 어떻게 해야 할지 고민하다가 차츰 정리가 돼서 적어보려고요.

CSS Module에서 CSS in JS로

저는 원래 CSS Modules(SASS)를 사용했는데 애니메이션 라이브러리와의 호환성이 좋지 않아서 (나중에 해결) Atomic Design을 도입한 후에 파일 구조를 어떻게 해야 할지 막막해서 CSS in JS로 갈아타는 것을 고려하는 절차가 되었습니다.
가장 골치 아픈 것은 파일 구조입니다. 저는 개인적으로 아토믹스에 해당하는 최소 구성 요소라도 css/sass 파일을 만들어야 한다고 생각합니다. 이것은 저를 매우 혐오스럽게 하고 작은 위젯의 분리에 저촉됩니다.

선택한 CSS in JS 라이브러리

주요 토론 항목으로 삼다

표시된 라벨 자체를 변수로 바꾸고 싶지 않다

mixin과config 등을 한데 모아 전 세계적으로 널리 사용하기를 희망

구성 요소 간에 스타일 커버를 유연하게 수행하려는 경우

리액트/넥스트를 사용하지 않는 사람들도 쉽게 이해할 수 있도록

이것을 중심으로 프로그램 라이브러리를 선택했습니다.
토론의 주요는 다음과 같은 세 가지가 있다.

styled-components

styled-jsx

emotion

왜냐하면 styled-components는 해결할 수 없을 것 같아요.×
styled-jsx 2 때문에 해결 못 할 것 같아요.×
이에 따라 emotion을 사용하기로 했습니다.

emotion의 이점

코드는 Next입니다.js의 예를 사용합니다.

사용이 편리하다

@emotion/react에서 css 속성으로 가져온 css를 되돌려주면 됩니다. 따라서 '순수' 탭 이름으로 스타일을 적용할 수 있습니다.

import { css } from '@emotion/react'

export const Hoge: React.FC = () => (
  <div css={hoge}>
    <p>hoge</p>
  </div>
)
const hoge = css`
  margin: 100px auto 0;
`

도 함수를 함수화하여 스타일을 유연하게 덮어쓸 수 있다.(이것이 좋은지 나쁜지는 말하지 않겠다)
마찬가지로, 미디어 조회와 같은 전역에 믹스의 함수를 놓을 수도 있다.

import { css, SerializedStyles } from '@emotion/react'

type Props = {
  text: string
  _css?: SerializedStyles
}

const H1: React.FC<Props> = ({ text, _css }) => (
  <h1 css={title(_css)}>{text}</h1>
)

const title = (_css: SerializedStyles): SerializedStyles => css`
  position: relative;
  font-size: 50px;
  line-height: 1;
  ${_css}
`

성능

스타일드-components보다 약간 emotion의 성능이 좋습니다.
참조:

향후 유지 보수(경향)

현재 스타일드-components는 emotion보다 더 인기가 많은 것 같습니다.
참조: Sass에서 CSS Modules까지 가다가 스타일드-components로 갈아타는 이야기
운용이 수반되는 큰 프로젝트에 활용하면 향후 외면성이 큰 영향을 미치겠지만, 자신이 광고 제작사에서 일할 때도 운용 등이 일어나기 때문에 그렇게 중요하게 생각하지 않는다.