О CSS-препроцессорах и фреймворках: зачем они нужны и с чем их едят

Сегодня поговорим о том, как можно сделать работу с CSS проще и удобнее, подключив препроцессоры и фреймворки. 

Немного о CSS

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

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

Что такое препроцессор и зачем он нужен?

CSS-препроцессор – это программа, позволяющая генерировать CSS-код, используя уникальный синтаксис, присущий только конкретному препроцессору. 

По сути, препроцессоры – это отдельные скриптовые языки, у каждого из которых свое представление о том, как должен работать CSS, и свой стек возможностей (хоть и довольно часто пересекающихся между собой).

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

Что такое фреймворки и для чего они нужны?

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

Фреймворки сильно отличаются друг от друга и имеют разные подходы, но у них общие цели:

• Ускорить процесс разработки, за счет уничтожения привычных для CSS сложностей с визуальным оформлением страниц.

• Добавить в сайт или приложение кроссбраузерность.

• Вынудить команду разработчиков следовать определенным правилам дизайна. 

• Корректно выровнять все элементы на странице.

• Сделать подключаемые к приложению стили более удобными с точки зрения поддержки.

Особенности препроцессоров

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

Примеры показаны на базе препроцессора LESS, но в других синтаксис отличается не принципиально.

Переменные

Да, они есть и в «чистом» CSS, но реализованы менее удобно. 

@colorForButton: #76AB04
button {
  background: @colorForButton;
}

Вложенность

Благодаря препроцессорам не нужно каждую строку прописывать отдельно. В них действуют элементарные правила вложенности, как и в структуре HTML. 

div {
dispaly: flex;
anotherDiv {
  margin: 20px 0px;
}
@media (max-width: 720px) {
  position: absolute;
}
}

Mixins

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

@flex ($justify, $align) {
display: flex;
justify-content: $justify;
align-items: $align;
flex-flow: column;
}

div {
  .flex(center, stretch);
}

Математические выражения

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

@basicHeight: 85vh;
.heightOnThisPage {
height: calc(40% + (@basicHeight - 40px))
}

If/Else-выражения

В некоторых препроцессорах поддерживаются логические операции. 

@variable: true;
@color: blue;

if (@variable, @color: red)

Функции

У всех препроцессоров есть набор функций, с помощью которых можно оперировать стилями. Некоторые позволяют менять цвета объектов, некоторые добавляют в них анимацию и т.п. 

И это только часть возможностей препроцессоров. Подробнее ознакомиться с ними можно в официальной документации каждого. 

4 популярных CSS-препроцессора

Есть несколько распространенных дополнений к CSS, используемых чаще остальных:

1. SASS – самый популярный и часто используемый. Отличается от остальных наиболее сложным синтаксисом. Требует более четко прописывать визуальные стили и все же заставляет вводить больше кода, чем хотелось бы. Но при этом SASS обладает функциями, недоступными у конкурентов, поэтому он и лежит в основе многих фреймворков.

2. LESS – более простой с точки зрения синтаксиса препроцессор, но более ограниченный с функциональной точки зрения. При этом имеет более качественную поддержку в большинстве IDE и отлично подходит для новичков и несложных сайтов. 

3. Stylus – интересный язык, в заметной степени меняющий представление о том, как оформляется CSS. Он напоминает Python, где отсутствуют многие скобки и спецсимволы.

4. PostCSS – мощный препроцессор с автоматической проверкой на ошибки, подстановкой нужных префиксов и генерацией названий для селекторов.

Краткий обзор лучших CSS-фреймворков

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

Bootstrap

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

Прелесть Bootstrap заключается в том, что вам не нужно использовать конструкторы в духе WordPress и самому разбираться с визуальным оформлением сайта. Используя Bootstrap, можно получить лучшее из двух миров, продолжая самостоятельно писать логику приложения и не тратить время на его оформление. 

Правда, нужно понимать, что Bootstrap, как и любой другой набор шаблонов, наверняка включает в себя десятки компонентов, которые вам не нужны. С их наличием придется смириться. 

Foundation

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

Foundation более сложный с точки зрения структуры. Включает в себя CSS-, HTML- и JavaScript-файлы, работает на базе SASS. Для установки и настройки используется фирменная консольная утилита.

И что важно, в Foundation заранее учтена адаптация веб-сайтов и приложений под требования людей с ограниченными возможностями. 

Bulma

Это очередной аналог Bootstrap, предлагающий быстро собрать сайт на шаблоне, но он отличается от своего конкурента упрощенной структурой файлов, так как полностью написан на CSS и не требует подключения JavaScript для нормальной работы. 

Из интересных функций стоит отметить наличие компонента для быстрой реализации темной темы на сайте. Также Bulma поддерживает препроцессор SASS. 

В Bulma, как и в Bootstrap, есть набор готовых визуальных решений. Можно выбрать любое и слегка адаптировать под свой ресурс, не тратя дни на создание собственных компонентов. 

TailwindCSS

Стремительно набирающая обороты технология, практически исключающая CSS-синтаксис из приложений и сайтов. Благодаря TailwindCSS можно прописывать стили прямо в HTML-классы. Да, это похоже на то, как работают inline-стили, но не совсем, потому что TailwindCSS, помимо прочего, предлагает собственный синтаксис.

Например, вместо background-color: white используется сокращение bg-white. И таких вариаций много. Благодаря сокращенном директивам удается достичь опрятного вида при прописывании стилей прямо в HTML-классы. 

А сами директивы оформляются в отдельном конфигурационном файле, где можно заменить значение каждой из них. Например, создать переменную bgw и использовать ее для окраски фона в белый цвет. 

TailwindCSS избавляет от необходимости генерировать дополнительные файлы и возиться с селекторами. При этом не лишает свободы творчества и не сказывается на производительности приложения.

Skeleton 

Минималистичный CSS-фреймворк, основная цель которого быстро собрать стильный сайт без необходимости мудрить с визуальным оформлением. 

Skeleton по умолчанию адаптивный и идеально выглядит на экране любого размера. Но какой-то роскоши с точки зрения дизайна ожидать не стоит. Разработчики сделали все, чтобы предельно упростить стили в Skeleton. Здесь всего три цвета: белый, серый и голубой. Один вариант оформления списков, один вариант оформления кнопок. 

Как и другие фреймворки, Skeleton поддерживает семантическую верстку. Вместо конкретных значений в духе grid-column-start: 3 можно написать grid-third, и объект расположится в нужном месте. 

Идеально подходит тем, кому нужно быстро собрать сайт и кому не нравится стандартный синтаксис CSS. 

Pure 

Похожий на Skeleton фреймворк, в основе которого лежит та же идея – создать минималистичный плацдарм для всего визуального стиля сайта или приложения. Принципиальная разница заключается в том, что Skeleton навязывает свой дизайн, а Pure – предлагает создать свой. 

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

Pure отлично подходит в качестве стартового варианта, потому что не вынуждает переписывать уже готовый CSS, а действительно работает как шаблон и предлагает быстро создать что-то свое.

Вместо заключения

Как видите, способов упростить работу с CSS много, и вы можете выбрать тот подход, который вам по душе. Не нравится синтаксис? Установите препроцессор или TailwindCSS. Не хочется с нуля придумывать дизайн? Установите Skeleton или его аналог. Хочется с ходу получить готовое решение? Тогда Bootstrap в помощь.

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