Стоит ли отказываться от CSS препроцессоров в 2025 году

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

Способы упрощения написания CSS можно разделить на две группы:

• Препроцессоры
• Постпроцессоры

К препроцессорам относятся такие инструменты, как Sass, Less и Stylus. Как следует из названия категории, эти инструменты позволяют писать CSS в их синтаксисе, прежде чем компилировать код в валидный CSS.

Постпроцессоры работают в обратном направлении — вы записываете в CSS-файл невалидный синтаксис CSS, а постпроцессоры изменяют эти значения в валидный CSS.

Сегодня существует два основных постпроцессора:

• PostCSS
• LightningCSS

PostCSS — это самый большой представитель этого направления, а Lightning CSS — новый и заслуживающий внимания. Мы поговорим об обоих позже.

Постпроцессоры победили в компиляции

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

Самым очевидным (и самым полезным) плагином для PostCSS уже долгое время является Autoprefixer — он создаёт вендорные префиксы за вас, избавляя от необходимости возиться с ними.

/* Исходный код */
.selector {
  transform: /* ... */;
}

/* Результат */
.selector {
  -webkit-transform: /* ... */;
  transform: /* ... */;
}

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

Что действительно склонило баланс в сторону постпроцессоров, так это:

• Нативный CSS получил существенные возможности
• Почему Tailwind 4 больше не поддерживает препроцессоры
• Lightning CSS

Давайте поговорим о каждом из них подробнее.

Нативный CSS получил существенные возможности

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

• Переменные CSS
• Возможности вложенности CSS
• Возможность разбивать CSS на несколько файлов без дополнительных запросов на выборку
• Условные элементы, такие как if и for
• Миксины и функции

За прошедшие годы нативный CSS сильно продвинулся вперёд. Он получил отличную поддержку браузеров для первых двух функций:

• Переменные CSS
• Вложенность CSS

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

Но для остальных, кому важно, чтобы поддержка и производительность загрузки были в приоритете, нужна третья функция — возможность разбивать CSS на несколько файлов. Это можно сделать с помощью функции use в Sass или функции import в PostCSS ( предоставляется плагином postcss-import).

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

Хотя, по моему опыту, миксины лучше заменить функцией @apply из Tailwind.

Таким образом, мы переходим к Tailwind.

Почему Tailwind 4 больше не поддерживает препроцессоры

В Tailwind 4 официально удалена поддержка препроцессоров. Из документации Tailwind:

Tailwind CSS v4.0 — полнофункциональный инструмент для создания CSS, предназначенный для определённого рабочего процесса, и не предназначен для использования с такими препроцессорами CSS, как Sass, Less или Stylus. Считайте, что Tailwind CSS сам по себе является препроцессором — не следует использовать Tailwind с Sass по той же причине, по которой вы не стали бы использовать Sass со Stylus. Поскольку Tailwind разработан для современных браузеров, вам не нужен препроцессор для таких вещей, как вложенность или переменные, и Tailwind сам будет делать такие вещи, как связывать импорты и добавлять вендорные префиксы.

Если вы включили Tailwind 4 с помощью самого прямого метода установки, то не сможете использовать препроцессоры с Tailwind.

@import `tailwindcss`

Потому что один этот оператор import делает Tailwind несовместимым с Sass, Less и Stylus.

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

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Мне лично не нравятся стили preflight Tailwind, поэтому я исключаю их из своих файлов.

@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

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

Итак, рядом с Tailwind находится постпроцессор CSS под названием Lightning CSS, поэтому поговорим о нём.

Lightning CSS

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

• postcss-import
• postcss-preset-env
• autoprefixer

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

Lightning CSS работает в 100 раз быстрее, аналогичных инструментов на базе JavaScript. Он может минифицировать более 2,7 миллиона строк кода в секунду в одном потоке.

Скорость помогает Lightning CSS победить, поскольку многие разработчики — фанаты скорости, и они не против сменить инструмент, чтобы добиться уменьшения времени компиляции. Но Lightning CSS выигрывает ещё и за счёт широкого распространения.

Его можно использовать напрямую как плагин Vite ( поддерживаемый многими фреймворками). Если необходима помощь, у Ryan Trimble есть пошаговая статья о настройке его в Vite.

// vite.config.mjs
export default {
  css: {
    transformer: 'lightningcss'
  },
  build: {
    cssMinify: 'lightningcss'
  }
};

Если вам нужны другие плагины PostCSS, их также можно включить в цепочку инструментов PostCSS.

// postcss.config.js
// Import other plugins...
import lightning from 'postcss-lightningcss'

export default {
  plugins: [lightning, /* Other plugins */],
}

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

Если вы уже пробовали Lightning CSS и напишите в комментариях о впечатлениях!

Если хотите отказаться от препроцессоров сейчас

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

• Переменные CSS
• Возможности вложенности CSS

Lightning CSS будет достаточным, если вам нужны:

• Переменные CSS
• Возможности вложенности CSS
• Операторы импорта для разбиения CSS на несколько файлов

Tailwind (с @apply) будет достаточным, если вам потребуется:

• Всё вышеперечисленное
• Миксины

Если вам всё ещё нужны условия, такие как if, for и другие функции, то пока лучше придерживаться Sass. (Я пробовал и столкнулся с проблемами совместимости между postcss-for и Lightning CSS, которые не буду здесь описывать).

Это всё, чем хотелось бы поделиться с вами сегодня. Надеюсь, это поможет, если вы задумывались о своём наборе инструментов CSS.

Если у вас сформировался свой набор инструментов для работы с CSS расскажите о нём в комментариях.