Предлагаю вашему вниманию перевод статьи из блога популяризатора веб-технологий Криса Койера About Variables in CSS and Abstractions in Web Languages. В статье автор поднимает вопрос о том, действительно ли CSS нуждается в дополнениях, которые делают его сложнее для восприятия, а порог вхождения — выше, когда у разработчиков уже сегодня есть возможность подняться одним уровнем абстракции вверх.
Переменные приходят в CSS. Уже сегодня есть конкретные реализации, так что их теперь не остановить. В Firefox они появились в версии 29, а в Chrome их можно использовать без префиксов в версиях 29 и старше, если у вас в настройках включён флаг Enable experimental Web Platform features (в русской локали «Включить экспериментальные функции веб-платформы» — прим. перев.).
Скажу сразу, можно сколько угодно спорить о том, хорошо это или плохо, но изменить уже ничего нельзя. Однако, так как мне всё же хочется обсудить эту тему, я продолжу.
Недавно я делал выступление на тему абстракций в вычислительных процессах. История знает несколько ключевых моментов, когда мы переходили на новый уровень абстракции. От «единиц и нолей» машинного кода к ассемблеру, от ассемблера к компиляторам, от компиляторов к их абстракциям. В конце концов мы смогли создать такие высокоуровневые языки, как C++.
Броузеры¹ состоят из частей, таких как движок визуализации (рендеринга) и движок JavaScript. Они написаны на C++. Так что, когда мы пишем на HTML, CSS или JavaScript, мы поднимаемся ещё на один уровень по лестнице абстрагирования. HTML, CSS и JavaScript не заменяют языков низшего уровня, они находятся над ними и зависят от этих «слоёв», которые как раз и позволяют им выполнять свою работу максимально успешно. HTML, CSS и JavaScript — это языки, которые мы придумали, чтобы создавать то, что мы хотели видеть в Сети — интерактивные документы.
Время идёт, и мы хотим/ожидаем/нуждаемся в том, чтобы веб-платформа делала больше. Новые возможности всегда добавляются в броузеры, но никогда не удаляются оттуда². Мы восхищаемся этими возможностями и стараемся полностью их использовать. Это делает создание веб-приложений более сложным делом. Но мы не любим сложности, потому что они доставляют неудобства в работе и снижают нашу эффективность.
Это продолжается уже достаточно давно, поэтому сейчас мы делаем новый шаг по лестнице абстрагирования. Абстракция — естественный враг сложности, так что мы берём её на вооружение, чтобы упростить написание кода.
Самой необходимой для нас абстракцией в Сети было упрощение работы с HTML. Было бы невероятно глупо работать над веб-сайтом, каждая страница которого хранилась бы в виде полного HTML-документа, начиная с
Абстракция в JavaScript есть изначально. В языке имеется соответствующий инструментарий — это переменные, циклы, функции и так далее.
Последним веб-языком, который нуждался в абстракциях, является CSS, и они пришли в него в форме препроцессоров. В CSS слишком много повторений, и он почти не даёт инструментов для абстракций. А препроцессоры дают то, что было нам так необходимо, и этим серьёзно помогают нам.
Ещё один важный момент — это популярность веб-платформы. Это самая успешная платформа в истории компьютеров. На ней создают больше, чем на любой другой. Если говорить другими словами, то чрезвычайно успешны HTML, CSS и JavaScript. Во многом этим они обязаны плодам усилий защитников веб-стандартов, но это уже совсем другая история.
Почему же такой язык, как CSS, настолько популярен? Потому что он очень прост. Селекторы и пары ключ-значение. И всё. Да, есть масса всяких подводных камней и тонкостей. Да, чтобы стать настоящим спецом, понадобится много времени. Но в основе своей этот язык очень прост. Вам понадобится десять секунд, чтобы показать незнакомому с ним человеку блок кода и объяснить, как это работает. Этого будет достаточно, чтобы он всё понял.
Я убеждён в том, что секрет успеха CSS в том, что его синтаксис легко понять, выучить и обучить ему других. Да, его есть, за что ругать, но я думаю, что в начальный момент разработки CSS были приняты верные решения.
Как и другие языки, со временем CSS развивался. Как и вся веб-платформа, он получал новые возможности. Джереми Кит указал на то, что с появлением
Как говорит Джереми:
Гарантий того, что фрагмент CSS обязательно имеет хоть какой-то смысл, теперь нет.
CSS (сам язык) идёт всё дальше по пути превращения в полностью программируемый. Если переменные удобны, то же касается и циклов, разве не так? Можно представить себе будущую версию CSS, в которой имеется столько мощных возможностей языка программирования, что он уже не воспринимается как тот простой, лёгкий для восприятия и понимания язык, от которого он берёт своё начало. А значит он лишён той простоты, благодаря которой к нему так легко было подступиться новичку.
Я совершенно определённо не являюсь противником переменных или любых других концепций, связанных с программированием. Мне они нравятся. Они дают мне больше возможностей как автору, упрощают мою работу и позволяют мне делать больше. Это то, что делают все (хорошие) слои абстракции. Так почему бы не оставить эти концепции как раз слою абстракции вместо того, чтобы менять базовые принципы языка?
Слово Джереми:
Позвольте мне в духе перекрёстного блоггинга, снова ответить Джереми.
Он сравнивает Sass и Haml и говорит, что Sass — это хорошо, а Haml — плохо. В этом я с ним, по большей части, согласен. Я немного работал с Haml и никогда не ощущал особых преимуществ от работы с ним. Я каждый день работаю с Sass, и от него впечатления совершенно противоположные. Здесь есть два момента.
Здесь важен контекст — «по истечении определённого времени». Когда наступает момент, в который мы делаем очередной шаг вверх по лестнице абстрагирования, всегда есть несколько языков, которые спорят между собой за то, кто займёт место в истории. Разработчики стараются обставить друг друга (как мы видим сейчас на рынке препроцессоров CSS), и с течением времени выявляется «победитель», которому принадлежит основная «доля рынка», если этот термин здесь применим.
Победитель — это то самое «хорошо», так как своё превосходство он подтвердил на деле. Проигравшие (вероятно) были не столь хорошими абстракциями.
Второй момент состоит в том, что я делю абстракции на «первичную» и «вторичные». Возможно, выбранные термины не слишком удачны, но я имею в виду, что есть абстракция, которая предоставляет авторам наиболее важные и значимые для них преимущества, — это первичная абстракция, а есть абстракции, которые добавляют лишь какие-то детали, — это вторичные абстракции.
Как я говорил выше, первичная абстракция в HTML — это шаблоны и хранение содержимого в хранилищах данных. Haml — это вторичная абстракция, благодаря которой некоторые разработчики получают более удобный синтаксис языка — это на любителя. CoffeeScript — это вторичная абстракция для встроенных в JavaScript инструментов абстракции.
Sass (или тот, кто со временем станет победителем) — это первичная абстракция для CSS.
Оригинал: About Variables in CSS and Abstractions in Web Languages
Примечания:
1 — Я прекрасно знаю, что сейчас принято писать «браузеры», но когда я впервые познакомился с этим словом, русского «канонического» варианта ещё не было, и часто встречалось написание через «о», в том числе и в специализированной литературе. С тех пор я пишу его только так. Извините, если задел ваши чувства.
2 — В комментариях к оригинальному посту Крису указывают на то, что это не совсем так.
UPD: Спасибо за предложения по правкам makc9I.
Переменные приходят в CSS. Уже сегодня есть конкретные реализации, так что их теперь не остановить. В Firefox они появились в версии 29, а в Chrome их можно использовать без префиксов в версиях 29 и старше, если у вас в настройках включён флаг Enable experimental Web Platform features (в русской локали «Включить экспериментальные функции веб-платформы» — прим. перев.).
Скажу сразу, можно сколько угодно спорить о том, хорошо это или плохо, но изменить уже ничего нельзя. Однако, так как мне всё же хочется обсудить эту тему, я продолжу.
Предыстория
Недавно я делал выступление на тему абстракций в вычислительных процессах. История знает несколько ключевых моментов, когда мы переходили на новый уровень абстракции. От «единиц и нолей» машинного кода к ассемблеру, от ассемблера к компиляторам, от компиляторов к их абстракциям. В конце концов мы смогли создать такие высокоуровневые языки, как C++.
Броузеры¹ состоят из частей, таких как движок визуализации (рендеринга) и движок JavaScript. Они написаны на C++. Так что, когда мы пишем на HTML, CSS или JavaScript, мы поднимаемся ещё на один уровень по лестнице абстрагирования. HTML, CSS и JavaScript не заменяют языков низшего уровня, они находятся над ними и зависят от этих «слоёв», которые как раз и позволяют им выполнять свою работу максимально успешно. HTML, CSS и JavaScript — это языки, которые мы придумали, чтобы создавать то, что мы хотели видеть в Сети — интерактивные документы.
Время идёт, и мы хотим/ожидаем/нуждаемся в том, чтобы веб-платформа делала больше. Новые возможности всегда добавляются в броузеры, но никогда не удаляются оттуда². Мы восхищаемся этими возможностями и стараемся полностью их использовать. Это делает создание веб-приложений более сложным делом. Но мы не любим сложности, потому что они доставляют неудобства в работе и снижают нашу эффективность.
Это продолжается уже достаточно давно, поэтому сейчас мы делаем новый шаг по лестнице абстрагирования. Абстракция — естественный враг сложности, так что мы берём её на вооружение, чтобы упростить написание кода.
Самой необходимой для нас абстракцией в Сети было упрощение работы с HTML. Было бы невероятно глупо работать над веб-сайтом, каждая страница которого хранилась бы в виде полного HTML-документа, начиная с
<!DOCTYPE html> и заканчивая , который приходилось бы редактировать непосредственно. Теперь так никто не делает. Конечные HTML-документы состоят из шаблонов и фрагментов содержимого.Абстракция в JavaScript есть изначально. В языке имеется соответствующий инструментарий — это переменные, циклы, функции и так далее.
Последним веб-языком, который нуждался в абстракциях, является CSS, и они пришли в него в форме препроцессоров. В CSS слишком много повторений, и он почти не даёт инструментов для абстракций. А препроцессоры дают то, что было нам так необходимо, и этим серьёзно помогают нам.
Популярность
Ещё один важный момент — это популярность веб-платформы. Это самая успешная платформа в истории компьютеров. На ней создают больше, чем на любой другой. Если говорить другими словами, то чрезвычайно успешны HTML, CSS и JavaScript. Во многом этим они обязаны плодам усилий защитников веб-стандартов, но это уже совсем другая история.
Почему же такой язык, как CSS, настолько популярен? Потому что он очень прост. Селекторы и пары ключ-значение. И всё. Да, есть масса всяких подводных камней и тонкостей. Да, чтобы стать настоящим спецом, понадобится много времени. Но в основе своей этот язык очень прост. Вам понадобится десять секунд, чтобы показать незнакомому с ним человеку блок кода и объяснить, как это работает. Этого будет достаточно, чтобы он всё понял.
h1 {
color: red;
}
Я убеждён в том, что секрет успеха CSS в том, что его синтаксис легко понять, выучить и обучить ему других. Да, его есть, за что ругать, но я думаю, что в начальный момент разработки CSS были приняты верные решения.
Усложнение языка
Как и другие языки, со временем CSS развивался. Как и вся веб-платформа, он получал новые возможности. Джереми Кит указал на то, что с появлением
@keyframes в CSS произошёл серьёзный сдвиг. Впервые появилась возможность писать CSS так, что он вообще не будет иметь смысла и может не работать до тех пор, пока не появится другой блок CSS./* Это не имеет смысла... */
.animate {
animation: my-animation 0.2s;
}
/* ...если не будет этого фрагмента, который может находиться где угодно в коде или вообще отсутствовать */
@keyframes my-animation {
to { color: red; }
}
Как говорит Джереми:
Значит переменные CSS (или произвольные свойства) не являются первой трещиной в стене принципов, на которых зиждется CSS. Если пользоваться другой моей метафорой, на скользкую дорожку он встал ещё с появлением @keyframes (а также, возможно, @font-face).
Гарантий того, что фрагмент CSS обязательно имеет хоть какой-то смысл, теперь нет.
CSS (сам язык) идёт всё дальше по пути превращения в полностью программируемый. Если переменные удобны, то же касается и циклов, разве не так? Можно представить себе будущую версию CSS, в которой имеется столько мощных возможностей языка программирования, что он уже не воспринимается как тот простой, лёгкий для восприятия и понимания язык, от которого он берёт своё начало. А значит он лишён той простоты, благодаря которой к нему так легко было подступиться новичку.
Слой абстракции
Я совершенно определённо не являюсь противником переменных или любых других концепций, связанных с программированием. Мне они нравятся. Они дают мне больше возможностей как автору, упрощают мою работу и позволяют мне делать больше. Это то, что делают все (хорошие) слои абстракции. Так почему бы не оставить эти концепции как раз слою абстракции вместо того, чтобы менять базовые принципы языка?
Слово Джереми:
Благодаря препроцессорам, таким как Sass, у нас и овцы целы, и волки сыты.
Не все абстракции одинаково полезны
Позвольте мне в духе перекрёстного блоггинга, снова ответить Джереми.
…не всякая абстракция хороша.
Он сравнивает Sass и Haml и говорит, что Sass — это хорошо, а Haml — плохо. В этом я с ним, по большей части, согласен. Я немного работал с Haml и никогда не ощущал особых преимуществ от работы с ним. Я каждый день работаю с Sass, и от него впечатления совершенно противоположные. Здесь есть два момента.
Крис заявляет о том, что абстракции это, по определению, «хорошо».
Здесь важен контекст — «по истечении определённого времени». Когда наступает момент, в который мы делаем очередной шаг вверх по лестнице абстрагирования, всегда есть несколько языков, которые спорят между собой за то, кто займёт место в истории. Разработчики стараются обставить друг друга (как мы видим сейчас на рынке препроцессоров CSS), и с течением времени выявляется «победитель», которому принадлежит основная «доля рынка», если этот термин здесь применим.
Победитель — это то самое «хорошо», так как своё превосходство он подтвердил на деле. Проигравшие (вероятно) были не столь хорошими абстракциями.
Второй момент состоит в том, что я делю абстракции на «первичную» и «вторичные». Возможно, выбранные термины не слишком удачны, но я имею в виду, что есть абстракция, которая предоставляет авторам наиболее важные и значимые для них преимущества, — это первичная абстракция, а есть абстракции, которые добавляют лишь какие-то детали, — это вторичные абстракции.
Как я говорил выше, первичная абстракция в HTML — это шаблоны и хранение содержимого в хранилищах данных. Haml — это вторичная абстракция, благодаря которой некоторые разработчики получают более удобный синтаксис языка — это на любителя. CoffeeScript — это вторичная абстракция для встроенных в JavaScript инструментов абстракции.
Sass (или тот, кто со временем станет победителем) — это первичная абстракция для CSS.
Оригинал: About Variables in CSS and Abstractions in Web Languages
Примечания:
1 — Я прекрасно знаю, что сейчас принято писать «браузеры», но когда я впервые познакомился с этим словом, русского «канонического» варианта ещё не было, и часто встречалось написание через «о», в том числе и в специализированной литературе. С тех пор я пишу его только так. Извините, если задел ваши чувства.
2 — В комментариях к оригинальному посту Крису указывают на то, что это не совсем так.
UPD: Спасибо за предложения по правкам makc9I.
