Frontender Magazine

Искушение 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 — извините, просто воняющая куча отбросов.

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

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

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

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

Jeremy Keith
Автор:
Jeremy Keith
GitHub:
adactio
Twitter:
@adactio
Сaйт:
http://adactio.com/
Vlad Andersen

Комментарии (5 комментариев, если быть точным)

Автар пользователя
pvpshoot

не совсем понятно, автор говорит что переменные в css это плохо, но в sass это норма, ведь его пользуют опытные люди, так в чем проблема (не)использования переменных в css? люди которые не сумеют использовать переменные в css, буду писать по старинке, не используя новых фишек. это как вы можете порезать хлеб обычным ножом, или воспользоваться суперпупер хлеборезкой, хлебушка вы все равно поедите)

Автар пользователя
Ivan-Belenkov

Думаю, что автор говорит вот в каком смысле: в случае введения всех этих новшеств в спецификацию CSS мы, в очередной раз, получим несколько реализаций для разных браузеров, префиксы и весь набор геморроя фронтенд-разработчика(это я молчу про 100% отсутствие поддержки в старых ИЕ). А это в очередной раз усложнит поддержку кода. Так зачем это нужно, если реализация уже существует, существует для всех браузеров и всех устраивает?

Автар пользователя
panych

Также не считаю, что ЦСС нуждается в переменных. Это скорее принесет еще больше проблем разработчикам нежели пользы. ХТМЛ продакшена ведь тоже почти никто руками не пишет. Каждая абстракция имеет свой слой, не нужно их перемешивать.

Автар пользователя
skip405

"примеси" улыбнули :)

Автар пользователя
aliaksandr-master

Изза нежелания вводить императив в стили весь инет погряз в копипасте.

Деклорация хороша только для маленьких сайтов... и для людей которые пишут в первый раз сайтик для себя... Но когда ты пишешь уже SinglePageApp то там за каждый байт война. и когда проект ОЧЕНЬ большой тут уже не о переменных думаешь, а о ООП для стилей. и пофигу что это уже может прочитать не все люди планеты...

Ни лесс ни сасс не решают полностью этой проблемы.