Мириам Сюзанна — автор, художник и веб-разработчик из Денвера, штат Колорадо, и в настоящее время работает над интересными спецификациями CSS, такими как Container Queries и Cascade Layers.
Этот пост является частью Designcember . Праздник веб-дизайна от web.dev.
Мириам Сюзанна — писатель, художник и веб-разработчик из Денвера, штат Колорадо. Она является сооснователем веб-агентства OddBird , штатным автором CSS Tricks, членом основной команды Sass и приглашенным экспертом W3C в рабочей группе CSS. В последнее время она сосредоточилась на разработке новых функций CSS, таких как каскадные слои, контейнерные запросы и область видимости. В автономном режиме Мириам — опубликованная писательница, драматург и музыкант. Мы говорили о ее работе с Sass и CSS.
Рэйчел: Впервые я узнала о вашей работе благодаря вашей сетке, Сьюзи . Что побудило вас ее создать?
Мириам: В 2008 году верстка в Интернете была совсем другим опытом. Разработчики перешли от табличной компоновки к более семантическим (но все же хакерским) плавающим сеткам. Произошел бум универсальных 12-колоночных «сеточных фреймворков», предоставляющих заранее определенную (обычно статическую) сетку с набором предопределенных классов CSS. Если вам нужно было что-то более настраиваемое, вы были предоставлены сами себе. Было ясно, что веб-сайты должны стать более отзывчивыми, но медиа-запросы еще не были доступны, и существовало множество проблем с совместимостью браузеров, связанных с плавными плавающими элементами.
Я использовал подход CSS Systems Натали Даун, который умело реагировал как на размер шрифта, так и на размер области просмотра, но меня расстраивали все повторяющиеся математические операции и необходимые браузерные хаки. В то же время 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 и в Твиттере @TerribleMia .