Преимущества использования CSS препроцессоров

Воплощение дизайнерского макета невозможно без использования HTML

Воплощение дизайнерского макета невозможно без использования HTML и CSS. Если язык разметки позволяет нам набросать шаблон из необходимых элементов, то CSS преобразует этот шаблон к нужному виду, как на исходнике.

Казалось бы, с помощью чистого CSS можно сделать страницу такой, какой хотел видеть её заказчик. Однако, если кто-то откроет ваш единственный CSS-файл и попытается что-то подправить, уверены ли вы, что код будет читаемым, редактируемым, структурированным и понятным? Если ваш проект огромен, состоит из множества частей, то уверены ли вы, что сможете с легкостью поддерживать его в будущем? Если использовать CSS-препроцессор, то ответ - да. Почему ? Сейчас узнаем.

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

Использование подобного инструмента в современной разработке - “must have”, и я советую каждому верстальщику или разработчику ознакомиться с ним. Следует добавить, что есть с чего выбирать, ведь существует достаточно много CSS-препроцессоров, но следует выделить самые популярные:
- SASS
- LESS
- Stylus

Все вышеперечисленные препроцессоры имеют практически идентичный функционал, есть только небольшие различия в синтаксисе.

Теперь, вернемся же к вопросу, озвученному ранее: какие преимущества дают нам препроцессоры, для того чтобы сделать наш код более удобным, и поддерживаемым? Это, прежде всего, вложенность. Такая особенность дает нам возможность структурировать элементы, с легкостью найти родителя элемента, быстро писать псевдоклассы и псевдоэлементы и даже использовать БЭМ!

К примеру:
.track
color: #fff
&__title
paddding: 10px
&:hover, &:focus
color: blue

Посмотрите на этот фрагмент кода, написанный на Sass. Всё это преобразуется в следующий CSS:
.track { color: #FFF;}
.track__title { padding: 10px;}
.track__title:hover, .track-title:focus { color: blue}

Лаконично, удобно, понятно, структура от родителя до потомка - здорово, не так ли? Вторым, и не менее важным, преимуществом, являются переменные. Принцип работы их предельно прост: имя переменной начинается с символа $ , а дальше само имя. Через двоеточие пишем значение - это может быть цвет в любом удобном виде, значения отступа, ширины, размера шрифта и так далее. В итоге мы получим примерно следующее:
$btn-color: blue;
$font-main-size: 16px;

А использование будет выглядеть следующим образом:
.block {
font-size: $font-main-size;
}

Только представьте себе, как это удобно. Если вам нужно поменять цвет кнопок по всему сайту, то это достаточно сделать только в одном месте! Что же, идем дальше. Третье, и самое большое, что может нам предложить CSS-препроцессоров - это использования миксинов. В привычном для нас понимании, миксины - это функции, которые можно использовать несколько раз, не повторяя одни и те же части кода (помним об одном из принципов программирования - DRY - Don’t repeat yourself).

Признаться честно, я не так часто использую миксины, видимо не было такой острой необходимости, однако несколько примеров я всё же покажу. Одна из самых используемых мной функций имеет следующий вид:

@function em($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}

@if (unitless($context)) {
$context: $context * 1px;
}

@return $pixels / $context * 1em;
}

А её применение имеет следующий вид:
body {
font-size: em(14px);
}

Да, как вы поняли, это всего лишь преобразование размера шрифта из PX в Em (да здравствует те времена, когда для такой мелочи раньше пользовались специальным сервисами или считали сами на калькуляторе).

Следующий пример также позволяет сэкономить много времени:
@mixin input-placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}

Его использования:
input, textarea {
@include input-placeholder {
color: $grey;
}
}

Можно привести ещё множество примеров, однако, стоит начать использовать миксины самому, чтобы понять, насколько это полезный инструмент. Пожалуй, осталось ещё одна причина, которая заставит вас полюбить CSS-препроцессоры, и её имя - модульность. На дворе 2018 год, и модульность у нас повсюду - начиная от HTML-шаблонизаторов и заканчивая различными css фреймворками и сборщиками проектов. Препроцессоры здесь тоже не отстают. Вы имеете возможность вкладывать файлы в файлы и организовывать стили вашего проекта, как угодно. Пусть в отдельном файле у вас будут переменные, ещё в одном - медиазапросы, в третьем - шрифты и так далее. Кроме того препроцессоры хорошо совместимы с разными языками программирования.

Что же, время подводить итоги. CSS-препроцессоры - это незаменимая вещь для каждого верстальщика или профессионального разработчика. Все вышеперечисленные преимущества гораздо упростят и ускорят создание макета, а также сделают ваш код более понятным и структурированным не только для себя, но и для коллег. Надеюсь, что после прочтения данной статьи, у вас не осталось сомнений в том, стоит ли использовать CSS-препроцессоры.

Оцените (2 голосов - 4.5 из 5)
Спасибо!
1
(Ужасно)
2
(Плохо)
3
(Средне)
4
(Хорошо)
5
(Класс!)


Спасибо!
Ok