Искушение Sass

Недавно мой приятель Эмиль экспериментировал с CSS-переменными, а если точнее, с «кастомными свойстами», которые начали появляться в некоторых браузерах. Вам определенно стоит об этом прочесть — Эмиль очень доступно объясняет потенциал, который содержится в этой новой фишке CSS.

Ну а пока, большинство из нас использует для работы с переменными препроцессоры, вроде 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 — слой абстракции над HTML.

Если бы абстракции были вселенским благом по определению, то оба этих примера приносили бы одинаковую пользу. Но, если Sass — это отлично сделанный инструмент, который облегчает специалистам по CSS написание кода, то Haml — извините, просто воняющая куча отбросов.

Вот вам и ключевая разница: Sass не заставляет вас переписывать весь свой CSS совершенно заново. Собственно, каждый файл .css автоматически является валидным файлом .scss. Хотите — используйте какие-то возможности Sass, или же игнорируйте их, и делайте всё в своем темпе.

С другой стороны, Haml заставляет вас использовать совершенно новый синтаксис, в котором имеют значение пробелы и отступы, и этот синтаксис уже трансформируется в HTML. Нет никаких полумер. Это не просто безапеляционная абстракция, она совершенно не желает вступать в разумный диалог.

Поэтому мое мнение такое: Sass хорош не потому, что это абстракция, а потому что это именно хорошо спроектированная абстракция. А самое главное в Sass то, что его легко изучить, почти так же, как CSS.

Если вы заметили ошибку, вы всегда можете отредактировать статьюсоздать issue или просто написать об этом редакторам Антону Немцеву в skype ravencry, Константину Гупалову в skype cosmik_soul или в skypematmuchrapna доброму Владимиру Старкову.

Оригинальная статья:

Sasstraction