Для чего нужны препроцессоры css

Нужно ли использовать препроцессоры CSS?

Давно не заходил на тостер, и вдруг наткнулся на вопрос о препроцессорах CSS. Стало интересно — что это за зверь.

Почитал несколько сайтов с описанием, что это и для чего. Посмотрел примеры. Но ничего не понял — а зачем? В чем смысл?

Суть моего вопроса:

1) Препроцессоры позволяют вводить переменные и миксины. Но ведь в CSS можно просто создать свойство

.hello

и применять его ко всем элементам, где это нужно.
Какая разница — вписать в HTML

или использовать в файле стиля переменную, которую так же придется добавлять к какому-то желаемому типу объектов? Мне совсем не понятно.

2) Валидность CSS.

Препроцессор компилирует ваш «красивый сахарный» синтаксис в валидный CSS.
А в чем сложность писать сразу валидный CSS? Тоже не совсем понятно.

3) Компилятор из препроцессорного языка в CSS.

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

4) Удобочитаемость кода, и простой поиск,

Ну, это я тоже не пойму. Любой нормальный редактор кода умеет по нажатию горячей клавиши приводить все отступы и т.д. в порядок. Код становится красивым и читабельным. Да и мне не понятно — что такого в CSS может быть не читаемым? Есть класс, а в фигурных скобках — свойства. Что тут нечитабельное может быть?

Поиск — тоже не вижу сложности. В браузере — F12, он выстроит красивое дерево элементов с их стилями, а у каждой строчки стиля указан файл и строка, в которой это свойство указано. Даже можно мышкой тыкнуть, и откроется окно с указанным файлом и искомой строкой.

5) Возможность инклюда (include) в препроцессорах.

Можно же в HTML файле инклюдить нужные CSS через link rel=. . Чем инклюд в препроцессорах удобней, чем эта стандартная возможность?

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

6) Вложенность свойств.

Не понимаю, каким образом такой код:

.block < .sub_block < color: red; >>

удобочитаемей, чем обычный CSS:

7) На хабре видел в комментариях обсуждение, мол можно даже задавать в препроцессорах — какие браузеры поддерживать. Ахтунг! А зачем писать такие стили, которые не будут работать в старых браузерах?

P.S. Я не в коем случае не критикую новые направления, но я просто дано не изучал ничего нового, не использую фреймворки, так как и так все отлично работает.

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

• Вопрос задан более трёх лет назад
• 3396 просмотров

8 комментариев

Простой 8 комментариев

Зачем Нужны CSS Препроцессоры и их Преимущества

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

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

Что такое CSS-препроцессор?

В моем понимании, это надстройка над стандартным CSS, которая расширяет стандартные возможности, добавляет некоторые функции и позволяет писать более читаемый и удобный для понимания код. На выходе исходный код компилируется в привычный нам CSS. Использование подобного инструмента в современной разработке — “must have”, и я советую каждому верстальщику или разработчику ознакомиться с ним. Следует добавить, что есть с чего выбирать, ведь существует достаточно много CSS-препроцессоров, но следует выделить самые популярные:

Все вышеперечисленные препроцессоры имеют практически идентичный функционал, есть только небольшие различия в синтаксисе. Теперь, вернемся же к вопросу, озвученному ранее: какие преимущества дают нам препроцессоры, для того чтобы сделать наш код более удобным, и поддерживаемым? Это, прежде всего, вложенность. Такая особенность дает нам возможность структурировать элементы, с легкостью найти родителя элемента, быстро писать псевдоклассы и псевдоэлементы и даже использовать БЭМ! К примеру:
.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

Лаконично, удобно, понятно, структура от родителя до потомка — здорово, не так ли? Вторым, и не менее важным, преимуществом, являются переменные. Принцип работы их предельно прост: имя переменной начинается с символа $ , а дальше само имя. Через двоеточие пишем значение — это может быть цвет в любом удобном виде, значения отступа, ширины, размера шрифта и так далее. В итоге мы получим примерно следующее:

$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;
>

А её применение имеет следующий вид:

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

input, textarea <
@include input-placeholder <
color: $grey;
>
>

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

Препроцессоры здесь тоже не отстают. Вы имеете возможность вкладывать файлы в файлы и организовывать стили вашего проекта, как угодно. Пусть в отдельном файле у вас будут переменные, ещё в одном — медиазапросы, в третьем — шрифты и так далее. Кроме того препроцессоры хорошо совместимы с разными языками программирования. Что же, время подводить итоги.

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

Оцените (158 оценки — 4.4 из 5)

Как ускорить вёрстку на CSS. Обзор главных препроцессоров в 2023

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

Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте.

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

Препроцессор Sass

Sass (Syntactically Awesome Style Sheets) — один из первых CSS-препроцессоров, создан в 2007 году и имеет большое сообщество разработчиков. На github.com у Sass 3500 звёзд, еженедельно препроцессор скачивает более одиннадцати миллионов разработчиков:

Sass расширяет возможности CSS, добавляя вложенные правила, использование ссылки на родительский селектор, вложенные свойства, шаблонные селекторы.

Sass позволяет вкладывать правила CSS друг в друга. Благодаря этому, родительские селекторы не повторяются и CSS-файлы со множеством вложенных селекторов становятся понятнее:

Среди CSS-свойств существует разные пространства имён, например, font . Чтобы каждый раз не вводить пространство имён при указании свойства, с помощью Sass можно указать пространство один раз, и затем добавлять нужные свойства:

Кроме того, Sass предоставляет возможность использовать операторы и функции, что весьма упрощает написание и поддержку CSS.

Это самостоятельный препроцессор, который не требует установки дополнительных инструментов. Его можно использовать с любым проектом, который применяет CSS, и компилировать с помощью инструмента Sass CLI или плагинов для сборки.

Препроцессор имеет два отдельных синтаксиса — Sass и SCSS.

Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, считается устаревшим. Он использует отступы вместо фигурных скобок, они указывают на вложение селекторов. Новые строки заменяют точки с запятой для разделения свойств:

@mixin button-base() @include typography(button) @include ripple-surface @include ripple-radius-bounded display: inline-flex position: relative height: $button-height border: none vertical-align: middle &:hover cursor: pointer &:disabled color: $mdc-button-disabled-ink-color cursor: default pointer-events: none 

SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

@mixin button-base() < @include typography(button); @include ripple-surface; @include ripple-radius-bounded; display: inline-flex; position: relative; height: $button-height; border: none; vertical-align: middle; &:hover < cursor: pointer; >&:disabled < color: $mdc-button-disabled-ink-color; cursor: default; pointer-events: none; >> 

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

Препроцессор LESS

LESS — это тоже распространённый препроцессор, у него 16 900 звёзд на github.com и около 5 миллионов скачиваний в неделю на npmjs.com.

LESS был выпущен в 2009 году, поддерживает переменные, вложенные правила и миксины. Но он имеет менее сложный синтаксис, чем Sass, что делает его простым для изучения и использования.

Подобно Sass, LESS является самостоятельным препроцессором, его код компилируется в обычный CSS. Для компиляции используют LESS CLI или плагины, интегрированные в систему сборки проекта.

Препроцессор bмеет схожие с Sass базовые функции. Но LESS обладает дополнительными возможностями — в нём можно поднимать переменные, извлекать определённые компоненты из цвета, например, оттенок, насыщенность, яркость и контрастность.

В коде одно и то же свойство может повторяться множество раз. Переменные облегчают поддержку кода, предоставляя возможность управлять свойствами из одного места. Любая переменная в LESS инициализируется как директива, с использованием символа @ в начале.

Переменные можно использовать, например, в именах селекторов или свойств, URL-адресах и операторах @import .

// Variables @my-selector: banner; // Usage .@

С помощью LESS этот пример компилируется в CSS:

.banner

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

Препроцессор Stylus

Stylus — CSS-препроцессор, написанный на Node.js, создан в 2010 году. Использует синтаксис, похожий на Python.

font-size = 14px font-stack = "Lucida Grande", Arial, sans-serif body font font-size font-stack //Компилируется в CSS: body

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

У Stylus не такая обширная база пользователей, как у LESS и Sass. У него 11 100 звёзд на github.com и больше 3 миллионов скачиваний в неделю.

Stylus удобен для работы и имеет свои преимущества. Его отличает гибкость — работая в нём, можно не использовать двоеточия, точки с запятой и запятые. Например, так будет выглядеть задание свойств сразу для нескольких селекторов:

textarea, input border 1px solid #eee 

Также не нужны фигурные скобки для определения блоков, вместо них используются отступы. Для переменных, как и в Sass, применяется знак $.

$font-size = 14px body

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

Инструмент PostCSS

PostCSS — это инструмент, который позволяет преобразовывать CSS с помощью плагинов. Его выпустили в 2013 году, и сейчас он существует в 7 версии. Он не добавляет новый синтаксис, как Sass или LESS, но предоставляет возможность модифицировать CSS с помощью JavaScript-плагинов.

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

PostCSS также интегрируется с различными сборщиками проектов, например, с Webpack или Gulp, и позволяет автоматически запускать компиляцию CSS при изменении исходного кода, что делает его гибким и удобным в использовании.

Какой препроцессор выбрать

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

Если вы новичок, то лучше начать с простых препроцессоров, таких как Sass или LESS. Эти препроцессоры имеют более простой синтаксис, чем чистый CSS, большое сообщество, которое может помочь со сложными вопросами. Если вы опытный разработчик, то PostCSS — хороший выбор, так как он предоставляет более широкие возможности настройки и оптимизации.

�� Новичкам — Sass или LESS, опытным — PostCSS

Если вы работаете над большим проектом, то отлично подойдут Sass или LESS. Они имеют более структурированный синтаксис, который облегчит управление большим объёмом кода. Если вы заняты маленьким проектом, то PostCSS позволяет использовать только необходимые плагины, что может сделать процесс компиляции более быстрым и эффективным.

�� Для большого проекта — Sass или LESS, для маленького — PostCSS

Если вам нужно оптимизировать CSS-код, то PostCSS может быть лучшим выбором, так как он предоставляет множество плагинов для оптимизации CSS.

�� Для оптимизации кода — PostCSS

Некоторые разработчики выбирают более традиционные препроцессоры Sass или LESS, в то время как другие предпочитают гибкий инструмент PostCSS. Выбор препроцессора основывается на опыте и личных предпочтениях разработчика.

�� Если нужен более гибкий инструмент — PostCSS

Важно учитывать, что не все препроцессоры поддерживаются инструментами сборки проектов и CMS. Например, если вы работаете с WordPress, то удобнее использовать препроцессоры, которые легко интегрируются с этой CMS — Sass или LESS.

�� Если работаете с WordPress — Sass или LESS

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

�� При работе в команде — выбор согласуется со всеми

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

Материалы по теме

• В каких браузерах тестировать вёрстку в 2023
• 10 библиотек для CSS и JS анимации
• Обзор цветовых форматов в CSS

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

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

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

Немного о CSS

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

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

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

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

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

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

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

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

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

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

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

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

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

Переменные

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

@colorForButton: #76AB04 button

Вложенность

Благодаря препроцессорам не нужно каждую строку прописывать отдельно. В них действуют элементарные правила вложенности, как и в структуре 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

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

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

@basicHeight: 85vh; .heightOnThisPage

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, и вы уже не сможете вернуться к классическому варианту разметки.