Lee Robinson 님의 블로그를 의역/요약한 글입니다.

---

2024년에 쓰는 CSS는 정말 훌륭합니다.

• nesting, :has(), container query 등 무수히 많은 기능이 다양한 브라우저에서 지원됨

• StyleX와 LightningCSS 같은 새로운 CSS 툴

• CSS 로딩 성능을 도와주는 수많은 프레임워크와 컴파일러

  
  

2024년에 CSS를 사용하면서 느낀 점과 CSS 생태계에 대한 전반적인 의견을 담은 글입니다

디자인 제약 조건

사용자 경험

웹 사이트를 방문해서 스타일 시트를 로딩할 때 좋은 경험이란 무엇일까?

• 스타일 시트는 최대한 빠르게 로딩 되어야 함 (작은 파일 사이즈)

• 스타일 시트는 바뀌지 않은 이상 다시 다운로드 될 필요가 없음 (올바른 캐싱 헤더 설정)

• 페이지 컨텐츠는 레이아웃 시프트가 거의 없어야함

• 폰트는 최대한 빠르게 로딩 되어야 하고 레이아웃 시프트가 최소한이어야 함

개발자 경험

더 좋은 사용자 경험을 만드는데 여러가지 툴을 사용할 수 있으나 개발자 경험이 사용자 경험보다 우선 시 되면은 안된다.

더 나은 UX를 만드는데 DX가 어떻게 도움이 될까?

• 작은 파일 사이즈를 위해 안 쓰는 스타일 제거, minify, CSS 압축

• 파일 명 해싱으로 안전하고 독립적인 불변 캐시 헤더 컨트롤 지원

• 더 적은 네트워크 처리를 위해 CSS 파일 번들링

• 시각적 회귀 방지를 위해 네이밍 중복 방지

더 유지 보수하기 좋은 CSS를 위해서는 뭐가 필요할까?

• UI 코드를 삭제할 때 관련 스타일도 손쉽게 같이 제거할 수 있어야 함

• 테마나 디자인 시스템을 쉽게 적용할 수 있어야 함

• 자동 완성, 린터, 코드 에디터 TypeScript 지원

• 위와 관련된 피드백이 에디터 내에 표시되어야 함

2024년의 CSS

이제는 별다른 툴 없이도 CSS를 작성하는데 문제없습니다. (예시는 원글 참고)

별다른 빌드와 Sass, Less 없이도 여러 브라우저가 지원되는 CSS를 손쉽게 작성할 수 있어요.

그럼 이제 별도의 툴은 필요없을까요?

빌드 과정

위에 언급한 제약 조건을 만족 시키려면, 빌드 과정은 필히 들어갈 수 밖에 없습니다. 사용자가 항상 최신 브라우저를 사용한다는 보장도 없고 새로운 CSS 기능과 syntax는 나오기 마련이니까요.

개발자가 직접 @supports 기능으로 브라우저 호환성을 확인 할 수는 있겠지만, 사람이 하는 것보다 컴퓨터가 하도록 하는게 더 효율적이지 않겠어요?

Compilation

컴파일러는 아래의 작업들을 손쉽게 할 수 있습니다:

• 사용되지 않는 스타일 자동 제거, 파일 번들링, vendor prefix 삽입, 공백 및 주석 제거로 결과물 축소

• 고유 파일 명 자동 생성, immutable 캐시 헤더 설정

• 특정 브라우저 타겟팅 및 호환성을 위한 syntax lowering

CSS 스트리밍

구글에서 인천-파리 항공편을 검색하면 특정 위젯이 뜹니다. 뭐 항공편이 아니더라도 경기 일정, 장소, 콘서트, 각종 변환기 등 여러 위젯이 있는데 사용자가 선택한 결과에 따라 동적으로 달라지는 것을 한번에 불러오지는 않을 겁니다. 이런 UI와 스타일은 보통 동적으로 스트리밍 되고 있습니다.

React 와 Next.js에서는 streaming SSR과 CSS로 이런 기능을 지원하고 있습니다. React에서는 스타일에 의존성을 가진 UI를 컴포넌트화 시키는데요. 어떻게 하면 페이지 내 다른 요소에게 영향을 주지 않고 스타일만 스트리밍 할 수 있을까요?

스타일은 범위 (scoped)가 지정되어야 하고, 스타일 하고자 한 UI보다 먼저 로딩이 되어야 합니다. UI보다 스타일이 먼저 로딩 될 경우, 이미 페이지 내에 있는 요소는 영향을 받지 않고 스트리밍 되는 UI에 스타일을 입힐 수 있습니다.

예를 들면, CSS Module은 스타일을 불러오는 컴포넌트로 범위가 지정됩니다. Tailwind는 아토믹 유틸리티 클래스를 사용하고 클래스가 사용되기 전에 하나의 스타일 시트로 컴파일 됩니다. StyleX도 아토믹 클래스를 사용합니다. 글로벌 스타일 시트는 스트리밍 처음에 불러와지지 않는 한 스트리밍과 잘 맞지 않습니다.

추천

CSS Modules

CSS Modules는 작지만 강력한 툴입니다.

디자인 제약 조건을 대부분 만족 시키며 기본 CSS와 크게 다르지도 않습니다. CSS에서 사용하던 것들을 그대로 복붙해도 CSS Modules에서 잘 동작합니다. 거의 모든 번들러와 프레임워크에서 지원합니다.

다만, 아토믹 스타일을 지원하지 않습니다. 여러 테마를 지원하지 않습니다. 스타일 코드가 Typescript 파일 밖에 위치하고 있어 타입 체크나 자동 완성이 지원되지 않습니다.

여담으로, Vite에서 사용하고 곧 Tailwind도 사용할 LightningCSS도 CSS Modules를 지원합니다. postcss, autoprefixer 같은 툴은 더 빠른 Rust 기반 툴로 대체되고 있는 추세입니다.

Tailwind CSS

Tailwind는 사용하는 클래스만 컴파일 되도록 합니다. 비록 유틸리티 CSS 프레임워크라 무수히 많은 클래스가 존재하지만, 사용하게 되는 클래스만 컴파일 하기 때문에 상한선이 있습니다. 이 클래스들은 하나의 스타일시트로 컴파일 되며, 압축, 축소, 캐싱 과정을 거쳐 최상의 성능을 내도록 설계되어있습니다.

Tailwind만 작성할 필요 없습니다. Tailwind는 기본 CSS를 위한 유틸리티 프레임워크여서 다른 디자인 시스템과도 호환이 잘 됩니다. 즉, Tailwind와 CSS Modules 혼합해서 사용해도 됩니다.

Tailwind도 단점이 있습니다. 효과적으로 사용하려면 다른 툴들도 같이 사용해야합니다.

• VS code 익스텐션 - 자동 완성, 린터, syntax highlighting

• Prettier - 클래스 네임 자동 정렬

무엇보다 Tailwind를 사용하는 syntax 자체가 뜨거운 감자입니다. 좋아하는 사람도 많지만 싫어하는 사람도 많습니다. 직접 경험해보길 추천합니다.

StyleX

CSS-in-JS 라이브러리들이 가진 문제점은 아래와 같습니다:

• 성능: JS로 작성된 스타일을 CSS로 변환 시켜서 문서에 삽입한 뒤 렌더링 하는 수고가 들어갑니다. 이는 성능 저하로 이어질 수 있고 “zero runtime”을 추구하는 StyleX와 같은 라이브러리를 선호하는 이유입니다.

• 호환성: CSS-in-JS 라이브러리들이 React의 streaming 서버 렌더링을 지원하기는 하지만, 아직 몇몇 최적화 기법이 호환되지 않습니다.

이런 문제들을 해결하기 위해 “zero runtime”을 지원하는 Vanilla Extract, Panda 와 같은 라이브러리들이 생겼습니다.

이 중 StyleX는 가장 최근에 알려진 CSS-in-JS 라이브러리이며 언급한 것들 외에도 여러가지 기능들이 추가되어 있습니다. 직접 문서를 확인해보는 걸 추천 드립니다.

오픈 소스로 공개된 지는 얼마 안되었지만, 라이브러리 자체는 예전부터 존재해왔습니다. Facebook, Threads, WhatsApp, Instragram 등 Meta의 제품에서 사용되고 있습니다.

---

원글: https://leerob.io/blog/css