CSS Zen Garden의 꿈, 마침내 실제로 구현되다

Mozilla, Lincoln Loop와 함께 재구축한 Firefox.com은 현대적인 디자인을 특수 문법이나 전처리기에 의존하지 않는 네이티브 CSS로 구현함 Custom Properties, Grid, Flexbox의 발전과 브라우저 구현의 일관성 덕분에 과거의 우회 기법 없이 디자인을 충실하게 구현할 수 있게 됨 70개 이상의 컴포넌트와 25개 페이지 템플릿을 Wagtail 컴포넌트로 구현해, 콘텐츠 팀이 엔지니어의 도움 없이 각 언어 및 지역용 페이지를 만들 수 있음 작성한 스타일은 모두 네이티브 CSS지만, 프로덕션에서는 @import의 성능 문제를 해결하기 위해 PostCSS로 가져오기 구문을 인라인 처리함 CSS Zen Garden과의 연결점은 같은 마크업에 여러 디자인을 입히는 것뿐 아니라 디자인과 마크업의 분리에 있으며, Firefox.com도 이 분리를 구현함 CSS Zen Garden의 이상과 CSS의 성숙 2008년에 접한 Dave Shea의 CSS Zen Garden은 하나의 HTML 파일을 CSS만으로 완전히 다른 모습으로 바꾸며, 콘텐츠와 분리된 깔끔하고 재사용 가능한 디자인의 가능성을 보여줌 당시 CSS에는 변수가 없었고, 제공하는 속성만으로 디자인을 충실하게 구현하기 어려웠음 서버 측 처리, 이미지, 테이블 기반 레이아웃과 여러 우회 기법에 의존했음 브라우저마다 렌더링이 달라, 하나의 디자인이 모든 브라우저에서 제대로 동작하도록 맞추는 일이 작업의 큰 부분을 차지했음 이제 Custom Properties로 변수를 사용할 수 있고, Grid와 Flexbox로 복잡한 레이아웃을 훨씬 쉽게 구현할 수 있음 과거에 없던 속성이 생겼고 브라우저 지원도 충분히 일관돼, 우회 기법 없이 디자인을 충실하게 구현할 수 있게 됨 Firefox.com에는 하나의 디자인만 있으므로 CSS Zen Garden의 꿈과는 다르다는 반론도 있음 CSS Zen Garden은 같은 마크업에 여러 디자인을 입히는 방식으로 CSS의 가능성을 보여줬지만, 그 바탕에는 디자인과 마크업의 엄격한 분리, CSS의 표현력, 브라우저의 CSS 구현 수준을 드러내려는 목표가 있었음 Firefox.com 역시 이 분리를 바탕으로 CSS와 브라우저 지원의 성숙도를 보여주며, 원한다면 별도 스타일시트를 작성해 CSS Zen Garden처럼 디자인을 바꿀 수 있음 Firefox.com의 구현과 지원 범위 Mozilla, Lincoln ...