Краткая история CSS-in-JS: как мы к этому пришли и куда движемся

1
1007
views

Представляем перевод статьи Дэна Варда, опубликованной на сайте levelup.gitconnected.com.

Жизненный путь CSS-in-JS

Javascript и CSS

Хокон Виум Ли был первым, кто предложил концепцию каскадных таблиц стилей. Это произошло когда он работал в CERN в октябре 1994 года. Позже он упорядочил CSS в своей кандидатской диссертации в университете Осло в 2006 году.

На сессии вопросов и ответов, последовавшей после лекции о CSS, которую Ли представил 16 февраля 2006 года – за день до защиты диссертации – неожиданно было высказано пророческое предложение:

Этан Мансон: «Я думаю, что вы выявили суть проблемы, которая заключается в том, что что бы вы ни предложили, попадание предложенного в браузеры займет какое-то время. Я имею в виду, вы можете предложить это, и если вы действительно хотите, чтобы это стало стандартом… Opera, возможно, над этим поработает и примет в качестве стандарта, но остальные производители браузеров, вероятно, нет, а пока что-то не запускается практически во всех браузерах, оно не запущено».

Хокон Виум Ли: «Верно. Есть альтернатива, которая могла бы сработать сегодня: вставить это в хорошо написанные Javascript-библиотеки, к которым вы могли бы обращаться, и тогда это работало бы уже сегодня даже в IE6. Опять же, чтобы это случилось, вам бы пришлось задержать дыхание, кому-то из нас — тоже, но этот путь был бы значительно легче. Я думаю, нам нужно рассмотреть оба способа. Я думаю, нам придется поработать с CSS, но не задерживать дыхание чтобы использовать его».

Этан Мансон: «Нельзя ли сделать переход более плавным? Что если бы вы могли (это будет отвратительный код), но что если бы вы могли добавить к CSS желаемые свойства, но предусмотреть возможность использовать встроенный парсер Javascript для определения наличия этого кода в CSS и поддержки его с помощью Javascript-библиотеки

(Style sheets and the challenges related to the dynamic aspects of the Web)

Переломный момент

Как мы знаем, CSS пришел к тому чтобы стать методом определения того, как должен выглядеть веб-документ. Он обладал достаточными возможностями для удовлетворения нужд веб-разработчиков, работавших со всевозможными видами проектов, и был достаточно доступным для того чтобы даже разработчики-любители могли с ним работать без длительного изучения.

CSS также предоставляет ясное и четкое разделение ответственности между частями, ставшими святой троицей веб-документов: HTML, Javascript и CSS. HTML отвечает за структуру содержимого, JavaScript — за поведение, а CSS определяет, как все выглядит.

Этот подход годами обеспечивал прекрасное, проверенное в боевых условиях решение для публикации веб-страниц. Это было понятным, требующим немного для вхождения в курс дела и сделало веб-разработку доступной. С всемирной паутиной все было в порядке.

Однако, улучшение JavaScript со временем ввело в действие совершенно новую экосистему разработки. К 2011 году рост JavaScript-фреймворков для построения одностраничных приложений начал влиять на вид разработки. В октябре 2010 появился AngularJS, в декабре 2011 – EmberJS, в марте 2013 – ReactJS, в феврале 2014 – VueJS.

Между 2011 и 2014 годами, по мере роста популярности этих фреймворков, произошло смещение разработки от веб-документов (сайтов с преимущественно статическим контентом) в царство Одностраничных Приложений. Это движение продолжается до сих пор. Когда возросла сложность и поведение одностраничных приложений, пользователи начали ожидать от сайтов все более динамичного, богатого функционалом опыта.

Появление концепции CSS-in-JS

В ноябре 2014 года Кристофер Шедо, также известный как Vjeux, инженер из Facebook, произнес речь о концепции, которую он назвал CSS-in-JS (CSS в JS). Он начал речь с того, что стало довольно известным слайдом, показывающим его видение основных проблем CSS, которые необходимо решить, чтобы разработчики могли спокойно поддерживать высокодинамичные, масштабные веб-приложения:

План по преодолению трудностей в CSS

С 2014 года многие разработчики трудились над тем чтоб сделать CSS-in-JS реальностью. Обработка CSS с использованием JavaScript обеспечивает уникальное решение указанных выше проблем. Если вы хотите копнуть глубже и познакомиться с текущими реализациями, а также всеми «за» и «против» использования методов CSS-in-JS, я очень рекомендую отличную статью Индрека Ласна «All You Need to Know About CSS-in-JS».

Использование Javascript для применения и управления CSS на первый взгляд кажется нарушением принципа разделения ответственности. В своей прекрасной работе «Let There Be Peace on CSS» (статья / видео) Кристиано Растелли высказывает мысль, что фактически CSS-in-JS сохраняет принцип разделения ответственности. Мы просто по-другому ее (ответственность) нарезаем. Представьте, что зоны ответственности делятся по линиям элементов вместо деления по линиям технологий. Мы все равно получаем разделение в чистом виде:

Разделение ответственности

Документы или веб-приложения?

«Любой, кто проработал с CSS достаточно долго, сталкивался с его агрессивной глобальной природой — модель, созданная в эпоху документов, теперь пытается предложить нормальную рабочую среду для сегодняшних современных веб-приложений» (The End of Global CSS).

Грубо говоря, в интернете есть два вида сайтов: созданные для преимущественно статического контента (документы) и в основном интерактивные (веб-приложения). В своей работе The End of Global CSS Марк Далглейш доказывает, что CSS-спецификация, основанная на спецификации, созданной и отточенной в конце 90-х, не отвечает в должной степени нуждам современных веб-приложений.

Построение статического сайта и веб-приложения имеют совершенно разные потребности. Если традиционный CSS (не CSS-in-JS) удовлетворяет ваши запросы, – вперед! Конечно, даже если вы строите веб-приложение, есть много содержательных доводов в защиту преимуществ обычного CSS над CSS-in-JS.

У каждого проекта свои потребности, а у каждого разработчика – свои предпочтения. Поэтому вопрос не в том, кто победит в CSS-войнах, традиционный CSS или CSS-in-JS. Вопрос в том, какое CSS-решение в большей степени удовлетворяет нужды вашего проекта.

Я считаю, что конечные положения работы Кристиано Растелли «Let There Be Peace on CSS» скажут об этом лучше, чем что-либо из прочитанного мной:

«Я не думаю повлиять на все сообщество, подобное нашему, в целом. Но я могу попытаться убедить вас, что есть лучший путь, чем борьба друг с другом.

Поэтому, вот мои предложения:

  1. Примите изменчивую природу интернета как данность.
  2. Будьте осторожны со своими словами: они могут ранить.
  3. Будьте прагматичны, а не догматичны. И, главное, будьте любопытны».

Если мы сможем смириться с изменчивостью веба, мы сможем легче находить эмпатию для наших приятелей-разработчиков. Осторожно выбирая слова мы сможем избежать ненужных обид и споров. Ставя прагматизм выше догмы мы сможем быть открытыми для новых идей. Будучи любопытными, мы сможем открывать новые вещи, стоящие того, чтобы ими делиться, одновременно развивая и оттачивая наш набор инструментов.

***
Подписывайтесь на наш канал в Telegram!


1 КОММЕНТАРИЙ

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here