Firefox.com이 순수 CSS만으로 재구축되다
원제 The CSS Zen Garden dream, finally shipped
119 포인트댓글 57
Key Point
현대 CSS의 기능이 얼마나 성숙했는지 보여주는 사례이며, 대규모 상용 사이트에서 전처리기 없이 순수 CSS 기반 설계 시스템이 실제로 작동함을 입증한다.
핵심 요약
- Mozilla와 협업하여 Firefox.com을 전처리기 없이 현대적 네이티브 CSS만으로 완전히 재구축했다.
- CSS 변수, Grid, Flexbox 등 최신 CSS 기능이 2000년대 초반의 한계를 극복하면서 순수 CSS 기반 설계 시스템이 실제 제품 수준에서 가능해졌다.
- 70개 이상의 컴포넌트와 25개 페이지 템플릿으로 구성된 디자인 시스템을 구축했으며, Wagtail 컴포넌트로 구현해 콘텐츠 팀이 엔지니어 도움 없이 페이지를 조립할 수 있다.
- 19개 언어를 지원하며, 유일한 빌드 도구인 PostCSS는 @import 성능 최적화만을 위해 사용되고, 작성된 CSS는 모두 브라우저가 이해하는 순수 CSS다.
- CSS Zen Garden에서 시작된 '콘텐츠와 디자인의 완전한 분리'라는 꿈이 거의 20년 만에 생산 환경에서 실현되었다.