Мечта CSS Zen Garden наконец воплотилась в реальность

Открытие CSS Zen Garden

В 2008 году, вскоре после окончания колледжа, разработчик познакомился с CSS Zen Garden — проектом Дейва Ши, где один HTML-файл можно было полностью переоформить, используя только CSS. Это была демонстрация потенциала CSS: создавать чистые, переиспользуемые дизайны с полным разделением оформления от содержимого.

В то время CSS был намного менее развит. Не было переменных CSS, доступных свойств не хватало для полнофункционального дизайна, поэтому приходилось полагаться на обработку на сервере, изображения, таблицы для вёрстки и бесконечные хаки. Разные браузеры отображали вещи по-разному, и большая часть работы сводилась к тому, чтобы заставить один дизайн работать везде. CSS Zen Garden показал, что теоретически возможно. Но реальное производство ещё отставало.

За последние годы CSS наконец подтянулся. Теперь поддерживаются переменные через Custom Properties, сложные макеты намного проще реализовать благодаря Grid и Flexbox, без хаков и боёв с техникой. Свойства, которых не было в CSS в 2008 году, теперь существуют и реализованы достаточно последовательно во всех браузерах. Можно полагаться на них для построения дизайнов с полной точностью без хаков.

Мечта воплотилась

Когда команда начала работать над Firefox.com, одной из целей было доказать, что CSS достаточно развился, чтобы современные дизайны можно было полностью реализовать на чистом CSS, поддерживая все современные браузеры, без препроцессоров. Это удалось. Вместе разработали систему дизайна из более чем 70 компонентов и 25 шаблонов страниц, реализованную как компоненты Wagtail, так что команда контента сайта может создавать страницы для любой локали без помощи инженеров. Все стили написаны исключительно на нативном CSS без специального синтаксиса¹, дизайн-токены экспортированы прямо из файлов дизайна в Custom Properties, и полная поддержка во всех современных браузерах без хаков².

Некоторые возражают, что мечта CSS Zen Garden была о кардинально разных дизайнах с одной и той же разметкой, и не видят связи с Firefox.com, у которого только один дизайн. Хотя CSS Zen Garden демонстрировал видение с помощью разных дизайнов и одной разметки, суть была всегда в том, чтобы «показать людям, насколько удивительным может быть CSS», сделав возможным строгое разделение дизайна от разметки, и продемонстрировать, «насколько хорошо разные браузеры реализовали CSS». С Firefox.com мы показали, насколько зрелым стал CSS как технология, и как далеко продвинулась поддержка браузеров. Доказали, что при чистом разделении дизайна и разметки теперь можно реализовать полнофункциональные дизайны, работающие в любом браузере, используя только CSS. (И если захотите, можете написать собственную таблицу стилей, чтобы переоформить Firefox.com прямо как в CSS Zen Garden.)

Доказать это вместе с талантливыми людьми из Mozilla, одного из лидеров веб-стандартов, было очень значимо. Сложно представить лучшее место, чтобы проверить, готова ли платформа. И она готова.

Благодарность

Многое в своём понимании этремесла заимствовано от людей, которые его сформировали: Николь Салливан, Рейчел Эндрю, Дженн Саммонс, Крис Койер, Кейси Келли, которая познакомила с проектом Mozilla, и Эрик Майер, герой родного города. Их работа научила целое поколение думать о CSS как о системе.

Открыт к сотрудничеству

С 2008 года строил системы дизайна на CSS — начиная с дизайн-системы для сети риэлторов, использующей CSS 2.0 и PHP для быстрого запуска новых сайтов для их бизнеса. За карьеру создавал множество дизайн-систем с разными веб-технологиями, которые помогали командам двигаться быстрее и оставаться последовательными. Инструменты всегда меняются, и в последние годы всё быстрее с AI, но неизменным остаётся понимание того, как работают дизайн-системы, и способность строить их с любой технологией.

Если команда строит проекты быстро и хочет выпускать их ещё быстрее, оставаясь последовательной и обеспечивая хороший опыт пользователя, открыт для работы с ориентированными на миссию и инновационными командами, ищущими frontend-экспертизу. Если это про вас — не стесняйтесь связаться.

Обновлено 16 сентября 2026.