Firefox.com이 순수 CSS만으로 재구축되다
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년 만에 생산 환경에서 실현되었다.