Ну а пока, большинство из нас использует для работы с переменными препроцессоры, вроде Sass. Именно о Sass говорил недавно Крис на An Event Apart, в Сан-Франциско — это мероприятие, кстати, как всегда отлично удалось.
В какой-то момент, во время конференции прозвучала следующая мысль: Крис отметил, что его совершенно устроила бы ситуация, в которой переменные (они же константы) остались бы только в Sass, и не включались в спецификацию CSS. К сожалению, мне не удалось пообщаться с Крисом на эту тему в кулуарах, но, мне кажется, что его ход мыслей в этом плане совпадает с моим. Дело в том, что я также убежден, что CSS-переменные должны остаться в епархии препроцессоров, а не браузеров.
Услышьте мои аргументы
Есть огромное количество очень мощных и практичных концепций, которые мы могли бы добавить в CSS, и, конечно, они бы его обогатили. Но, я думаю, что эти дополнительные возможности могут нам дорого обойтись.
Сейчас CSS — это относительно простой язык:
CSS — это не какая-то магия вуду, это простой и прямолинейный язык. Вы просто объявляете, что у элемента есть стиль, и дальше всё происходит само.
Конечно, это довольно упрощенное описание, и, разумеется, в СSS есть масса нюансов, таких какспецифичность или схлопывание полей. Но, в целом, у CSS действительно прямолинейный декларативный синтаксис.
selector {
property: value;
}
Вот и всё. Я думаю, что эта простота, сама по себе — неожиданно мощная и привлекательная штука.
В моей подборке о принципах проектирования есть секция с эссе Берта Боса «Что такое хороший стандарт?». В теории, эта статья посвящена стандартам проектирования в общем, но эти принципы очень хорошо применимы и к CSS в частности.
Некоторые из слов, на которые стоит обратить внимание: поддерживаемость, модульность, расширяемость,простота, и легкость для изучения. Многие из этих принципов очевидно связаны. Я думаю, что в CSS эти принципы очень хорошо сбалансированы, и при этом у веб-разработчиков всё равно остается очень много возможностей сделать что-то действительно необычное.
Если вернуться к этому фундаментальному паттерну CSS, то вы обратите внимание, что язык полностью является модульным.
selector {
property: value;
}
Все эти элементы (селектор, свойство, значение) не отсылают ни к чему больше в таблице стилей. Но если вы вносите сюда переменные, вся модульность рассыпается на глазах. Теперь, есть переменная, которая отсылает к значению, определенному где-то в другом месте исходной таблицы, или что гораздо хуже, вообще в абсолютно иной таблице стилей.
Но переменные не станут первым добавлением в CSS, которое приносит в жертву модульность. Это уже делают CSS-анимации. Если вы хотите подключить анимацию со стоп-кадрами, ее для начала нужно где-то определить. Определение и подключение происходят в отдельных блоках:
selector {
animation-name: myanimation;
}
@keyframes myanimation {
from {
property: value;
}
to {
property: value;
}
}
Я не уверен, что есть какой-то способ лучше делать функциональные анимации в CSS, но из-за этой функции мы приносим в жертву модульность, и, я думаю, что это скажется как на скорости понимания такого кода, так и на его читабельности.
Итак, CSS-переменные (они же кастомные свойства) — уже не первая трещинка в стене принципов проектирования CSS. Говоря метафорически, мы вступили на скользкую дорожку уже с @keyframes, а может быть, еще и с @font-face.
Никто не спорит с тем, что переменные или константы сделают CSS гораздо более мощным языком. Есть много концептов, таких как циклы, функции и так далее, которые дадут CSS еще больше возможностей. Но, я не думаю, что смешивать декларативный и программный подход — хорошая идея. Мы видели, к чему это привело, смотря на XSLT — странный гибрид как бы языка разметки с как бы языком программирования.
Я абсолютно уверен в том, что HTML и CSS должны остаться доступными для понимания языками. И не только для профессионалов. Я считаю, что безумно важно, чтобы каждый мог написать и стилизовать веб-страницу.
Значит ли это, что CSS так и должен оставаться хромоножкой? Нет, отнюдь. Благодаря препроцессорам, таким, как например, Sass, можно и любить помидоры, и кушать их. Мы, профессионалы, вполне можем использовать такие специфические инструменты, как Sass, чтобы пользоваться всем арсеналом переменных, функций (примесей) и других мощных концептом из мира программирования.
Препроцессоры разрубают тот гордиев узел, который сформировался в CSS из-за того, что мы хотим одновременно предоставить разработчикам мощные возможности, но, при этом, оставить язык на относительно легком для изучения уровне. Вот поэтому я буду очень рад, если переменные, примеси, наследование и всё такое останется целиком в области ответственности Sass.
Возможно это совпадение, но на том же An Event Apart Крис сказал, что сила Sass заключается в том, что это абстракция. Я не думаю, что это на самом деле так. Пожалуй, тот факт, что Sass предлагает нам более высокий уровень абстракции, в действительности, отвлекает нас от сути дела.
Крис открыто выступил за то, что абстракции — это хорошо. По определению. Конечно, если спуститься достаточно глубоко вниз по дереву абстракций, скажем, до ассемблера, с этим не поспоришь. Но не все абстракции одинаково хорошие, и я говорю не только про закон дырявых абстракций Джоэля Спольски.
Давайте, например, возьмем две разные абстракции, которые создавались с одинаковыми исходными принципами:
Если бы абстракции были вселенским благом по определению, то оба этих примера приносили бы одинаковую пользу. Но, если Sass — это отлично сделанный инструмент, который облегчает специалистам по CSS написание кода, то Haml — извините, просто воняющая куча отбросов.
Вот вам и ключевая разница: Sass не заставляет вас переписывать весь свой CSS совершенно заново. Собственно, каждый файл .css автоматически является валидным файлом .scss. Хотите — используйте какие-то возможности Sass, или же игнорируйте их, и делайте всё в своем темпе.
С другой стороны, Haml заставляет вас использовать совершенно новый синтаксис, в котором имеют значение пробелы и отступы, и этот синтаксис уже трансформируется в HTML. Нет никаких полумер. Это не просто безапеляционная абстракция, она совершенно не желает вступать в разумный диалог.
Поэтому мое мнение такое: Sass хорош не потому, что это абстракция, а потому что это именно хорошо спроектированная абстракция. А самое главное в Sass то, что его легко изучить, почти так же, как CSS.
