Препроцессоры CSS – зачем их используют при разработке сайта

Мы уже писали, что при разработке сайта обязательно используется CSS – специальный язык стилей. С его помощью всем элементам задаются размеры, положение, фоновый цвет, анимации, и многое другое. Файл со стилями подключается к страницам сайта и выполняется браузером, чтобы они выглядели именно так, как и задумал дизайнер.
Но написание CSS – трудоёмкая работа, потому что для каждого элемента нужно указать множество свойств. Для некоторых проектов файл стилей может разрастаться до нескольких тысяч строк кода и ориентироваться в нём становится сложно. Чтобы упростить задачу, многие разработчики используют так называемые препроцессоры CSS, которые позволяют сократить рутинные задачи при написании стилей.
Что такое препроцессоры CSS
Несмотря на довольно громкое название, препроцессоры представляют собой всего лишь надстройки над обычным CSS. То есть это просто ещё один способ написания кода, который потом преобразуется в обычные стили.
Препроцессоры позволяют писать классы элементов в сокращённом виде, пропускать знак «;» в конце каждой строки и фигурные скобки, использовать переменные, вычисления и многое другое. Однотипные стили можно описать один раз и потом просто вставлять в нужное место одной инструкцией. И это только малая часть их возможностей.
Но браузер не может работать с файлом стилей, написанном на языке препроцессора. Поэтому, чтобы получить обычный CSS-файл, нужно выполнить компиляцию. Есть разные способы, в том числе преобразование «на лету» прямо в редакторе.
Какие бывают препроцессоры CSS
Существует несколько видов препроцессоров, но основных всего три:
- SASS – Syntactically Awesome Style Sheets – появился в 2006 году, на сегодняшний день самый популярный и мощный. Он активно развивается и у него большое сообщество. Позволяет существенно увеличить возможности стандартных стилей CSS. Например, работать с циклами и функциями, представляя собой что-то среднее между стилями и программированием. SCSS – новый синтаксис SASS, более похожий на обычный CSS.
- LESS – Leaner Style Sheets – появился в 2009 году и также очень популярный. Это прямой конкурент SASS. LESS разрабатывался с целью быть ближе к CSS, поэтому их синтаксис идентичный. Он не имеет возможности использования циклов и условной логики, но зато легко расширяется плагинами.
- Stylus – для тех, кто любит писать компактный код. Появился в 2010 году и может гибко настраиваться – даже правила написания кода в нём можно менять. Очень удобный и перспективный.
Достоинства препроцессоров
Основные плюсы препроцессоров:
- Написание стилей занимает меньше времени, то есть создание сайта в целом происходит быстрее.
- Код, написанный на языке препроцессора, гораздо короче, чем на чистом CSS. Поэтому в нём проще ориентироваться.
- Благодаря возможности использования математических функций, миксинов (повторяющегося кода), переменных и прочего разработка упрощается и становится более гибкой.
- Стили проекта можно разбивать на логические части и писать в разных файлах – препроцессор потом объединит их в один.
Недостатки препроцессоров
Если препроцессоры так хороши, то почему же разработчики не используют их всегда? На это есть несколько причин:
- Использовать препроцессоры для небольших проектов не имеет смысла. Это, наоборот, усложнит разработку и поддержку.
- Требуется потратить время, чтобы выбрать препроцессор, изучить его синтаксис и привыкнуть к нему.
- Необходимо подключать дополнительные библиотеки и устанавливать программы на компьютер.
- Отладка стилей становится более сложной. Препроцессор собирает все исходные файлы в один, и в браузере не отображается в каком именно прописано нужное свойство, его придётся искать. Специальные файлы – source maps, конечно, сэкономят немного времени на поиск, но его всё равно нужно больше, чем на отладку стандартных стилей, потому что каждое изменение требует перекомпиляции.
На самом деле в CSS уже есть всё, что необходимо для вёрстки. Он постоянно развивается, добавляются новые свойства и возможности. Ну а стоит ли изучать препроцессоры – это уже каждый разработчик решает сам.
Какой сайт лучше – с использованием препроцессоров CSS или без них?
А теперь давайте посмотрим на всё это с точки зрения заказчика. Допустим, вам нужен сайт, и вы выбираете разработчика – один использует препроцессоры, а другой – нет. Как выбрать?
Препроцессор – это просто один из инструментов для вёрстки. В итоге всё равно получится обычный файл CSS. А написан он вручную или сгенерирован препроцессором – не имеет значения.
Простой пример – любой мастер по дереву имеет в своём арсенале стамески и рубанок. И когда вы заказываете у него какую-нибудь поделку, вам неважно, как её будут делать. Мастер сам знает, что для обработки доски ему потребуется рубанок, а для вырезания деталей – стамески.
Так и с препроцессором CSS. Разработчик сам выбирает, пользоваться им или нет. Ведь в одном случае он ему поможет, а в другом будет только мешать. Применение этого инструмента ничего не говорит о квалификации разработчика и никак не влияет на качество сайта. Поэтому акцентировать на этом особое внимание не стоит.