Мириам Сюзанна — автор, художник и веб-разработчик из Денвера, штат Колорадо, и в настоящее время она работает над интересными спецификациями CSS, такими как Container Queries и Cascade Layers.
Эта публикация — часть Designcember . Торжества веб-дизайна, организованного web.dev.
Мириам Сюзанна — автор, художник и веб-разработчик из Денвера, штат Колорадо. Она — соучредитель веб-агентства OddBird , штатный автор CSS Tricks, член основной команды Sass и приглашенный эксперт W3C в рабочей группе CSS. В последнее время она занимается разработкой новых функций CSS, таких как каскадные слои, контейнерные запросы и область действия. Мириам — опубликованный писатель, драматург и музыкант. Мы обсудили ее работу с Sass и CSS.
Рейчел: Я впервые узнала о вашей работе благодаря вашему фреймворку-сетке, Сьюзи . Что побудило вас создать его?
Мириам: В 2008 году вёрстка в вебе была совершенно иной. Разработчики перешли от табличной вёрстки к более семантичным (но всё ещё несовершенным) плавающим сеткам. Начался бум универсальных 12-колоночных «сеточных фреймворков», предоставляющих предопределённую (обычно статическую) сетку с набором предопределённых CSS-классов. Если требовалась более гибкая настройка, приходилось действовать самостоятельно. Было очевидно, что веб-сайтам нужно стать более адаптивными, но медиа-запросы ещё не были доступны, а плавающие сетке создавали множество проблем с совместимостью с браузерами.
Я использовал подход Натали Даун к CSS-системам , который хорошо реагировал как на размеры шрифта, так и на область просмотра, но меня раздражали все эти повторяющиеся математические вычисления и браузерные хаки. В то же время Sass начал привлекать внимание, и он идеально подходил для моих нужд. Первый черновик Susy был очень простым: всего пара миксинов для выполнения математических вычислений и добавления необходимых хаков. Целью было минимизировать код и выводить только необходимый код. Полностью настраиваемые сетки без каких-либо предопределённых классов.
Рейчел: Как вы перешли от работы над препроцессором CSS к работе над спецификациями CSS? Считаете ли вы, что работа над препроцессором стала хорошим опытом для написания спецификаций?
Мириам: По моему опыту, во многом пересекаются эти направления, и я по-прежнему активно участвую в обеих этих областях. Но, думаю, это во многом заслуга команды Sass во главе с Натали Вайценбаум , которая придерживается долгосрочного подхода и стремится разрабатывать инструменты, которые легко интегрируются с развивающимися веб-стандартами. Выход за рамки универсальных, «индивидуальных» решений и обеспечение долгосрочной гибкости крайне важны, когда речь идёт о будущем основных веб-стандартов.
Как создать инструменты, учитывающие разнообразие потребностей и подходов разработчиков, и в то же время поощряющие и облегчающие доступность и другие важные аспекты?
Рэйчел: В CSS появляется множество вещей, которые, по сути, заменяют функциональность, традиционно присущую Sass. Есть ли веские причины продолжать использовать что-то вроде Sass?
Мириам: Да, для некоторых, но универсального ответа здесь нет. Возьмём, к примеру, переменные. Переменные Sass имеют лексическую область видимости и компилируются на сервере вместе с организованными структурами данных, такими как списки и объекты, управление цветом и т. д. Это отлично подходит для логики дизайн-системы, которая не должна выполняться в браузере.
CSS-переменные во многом пересекаются, они также могут хранить значения, но обладают совершенно другим набором преимуществ и недостатков, основанных на каскадных методах. Sass не поддерживает пользовательские свойства, а CSS не может работать со структурированными данными. Оба полезны и мощны, но ваши конкретные потребности могут отличаться.
Я думаю, это здорово, когда люди могут отказаться от инструментов, которые им больше не нужны, и некоторым проектам могут не требоваться как серверные, так и клиентские переменные. Замечательно! Но слишком просто полагать, что это означает, что они идентичны, и одно просто заменяет другое. Всегда найдутся варианты использования, когда часть логики проектирования выполняется на стороне сервера, а другая — на стороне клиента, даже если мы дойдём до того, что языки программирования будут предоставлять по сути одинаковые функции. Препроцессоры с нами надолго.
Рейчел: Есть ли что-то, что удивило вас по мере того, как вы все больше вовлекались в работу по созданию стандартов, или что-то такое, о чем, по вашему мнению, люди в целом могут не знать в этом процессе?
Мириам: До того, как я начала участвовать в процессе стандартизации, он казался мне каким-то таинственным и волшебным чёрным ящиком, и я не знала, чего ожидать. Я боялась, что у меня может не хватить знаний о внутреннем устройстве браузеров, чтобы внести свой вклад, но на самом деле разработчикам браузеров не нужно больше специалистов. Им нужно больше разработчиков и дизайнеров, которые создают веб-сайты и приложения в реальных условиях.
Я был удивлен, обнаружив, что очень немногие из участников сосредоточены на стандартах, но также очень немногие занимаются разработкой или дизайном веб-сайтов. W3C состоит из «волонтеров» из организаций-членов (часто получающих от этих организаций зарплату, но не в качестве основной работы), и членство обходится недешево. Это отвлекает участников от повседневной работы дизайнеров и разработчиков, особенно тех из нас, кто работает с клиентами небольших агентств или работает фрилансером. Моя роль приглашенного эксперта была бы полностью волонтёрской и дорогостоящим хобби, если бы я не нашёл внешнего финансирования для этой работы.
На самом деле этот процесс довольно открытый и публичный, и требует участия разработчиков. Но в нём постоянно происходит так много обсуждений одновременно, что найти своё место может быть сложно. Особенно если это не ваша основная работа.
Рейчел: Контейнерные запросы уже много лет являются Святым Граалем для многих веб-разработчиков. Я очень рада, что они у нас есть. Мне кажется, многие задумываются о пользе контейнерных запросов. Считаете ли вы, что они могут раскрыть ещё больше творческих возможностей?
Мириам: Совершенно верно, хотя я не считаю, что это совершенно разные вещи. У всех нас мало времени, и мы стараемся писать поддерживаемый и производительный код. Когда что-то сложно реализовать на практике, мы менее склонны творчески подходить к возможностям.
Тем не менее, веб-индустрия сейчас находится во власти крупных корпораций, поэтому эти бизнес-интересы всегда получают больше эфирного времени, чем веб-художники. И я думаю, мы многое теряем, если игнорируем веб-творчество как основной вариант использования функций. Я был очень рад видеть, как некоторые специалисты по CSS экспериментируют с прототипом контейнерного запроса. Джей Томпкинс создал особенно остроумную и интерактивную демонстрацию венецианских жалюзи на CSS в качестве комментария к старому анти-CSS-мему. Думаю, в этой области есть ещё много чего, и мне не терпится увидеть, что ещё придумают.
Обсуждение также затрагивало запросы по размеру, как изначальный вариант использования, но мне интересно посмотреть, что люди делают с запросами по стилю — возможностью создавать условные стили на основе значения CSS-свойства или переменной. Это чрезвычайно мощная функция, и пока что практически неисследованная. Думаю, она открывает ещё больше творческих возможностей!
Рейчел: Есть ли что-то такое, чего мы не можем сделать (или что в будущем сможем сделать) в CSS, но что, по-вашему, было бы полезно?
Мириам: Я очень воодушевлена некоторыми другими спецификациями, над которыми работаю. Каскадные слои дадут авторам больше контроля над вопросами специфичности, а Scope должен помочь с более точным определением селекторов. Но и то, и другое — высокоуровневые архитектурные проблемы. Художник во мне больше воодушевлён такими вещами, как переключение CSS, декларативный способ создания интерактивных стилей или «шкалы времени» контейнеров, позволяющие плавно переносить значения между точками прерывания медиа или контейнеров. Это имеет очень практическое значение для адаптивной типографики, но также открывает множество творческих возможностей для адаптивной графики и анимации.
Рейчел: Кто еще сейчас занимается по-настоящему интересной, веселой и творческой работой в Интернете?
Мириам: О, я даже не знаю, как на это ответить, ведь так много людей занимаются творчеством в самых разных областях. CSSWG и Open-UI разрабатывают множество интересных стандартов, включая некоторые из ваших работ по фрагментации. Но больше всего меня вдохновляют веб-художники и то, как люди внедряют эти инструменты в производство способами, не связанными напрямую с коммерцией. Такие люди, как Джей , Линн Фишер , Юань Чуань и многие другие, расширяют границы визуального и интерактивного потенциала веб-технологий. Даже те, кто работает в сфере бизнеса, могут многому научиться, используя их художественные приёмы.
Мне также нравится более концептуальное веб-искусство таких людей, как Бен Гроссер , который постоянно заставляет нас переосмыслить наши ожидания от интернета и социальных сетей в частности. Взгляните, например, на его новый minus.social .
Рейчел: Следите за работой Мириам в области CSS на сайте css.oddbird.net и узнайте, чем еще она занимается, на ее сайте miriam.codes и в Twitter @TerribleMia .