CSS Minifier

Что такое минификация CSS?

Минификация CSS — это процесс удаления всех лишних символов из таблицы стилей без изменения её поведения. Речь идёт об удалении пробельных символов, переносов строк, комментариев и избыточного синтаксиса — таких как завершающие точки с запятой и ненужные кавычки. Браузер разбирает минифицированный CSS идентично оригиналу. Спецификация W3C CSS Syntax Module определяет грамматику: пробельные символы между токенами необязательны везде, где они не разделяют идентификаторы. Минификация использует это, сворачивая всё до минимально необходимого количества символов.

Онлайн-минификатор CSS берёт форматированную таблицу стилей и производит компактную версию, оптимизированную по размеру передаваемых данных. Типичная экономия составляет от 15% до 40% в зависимости от количества пробелов и комментариев в источнике. Для таблицы стилей размером 50 КБ это означает на 7–20 КБ меньше байт, передаваемых по сети при каждой загрузке страницы. В сочетании с gzip- или Brotli-сжатием на сервере минификация дополнительно уменьшает итоговый размер передаваемых данных: сжатый вывод уже минифицированного CSS меньше, чем сжатие форматированного оригинала.

Минификация — стандартный шаг во frontend-конвейерах сборки. Такие инструменты, как cssnano, clean-css и esbuild, выполняют её в рамках сборки. Но в процессе разработки нередко нужно минифицировать отдельный фрагмент для тестирования, встроить блок критического CSS или проверить, насколько сжимается таблица стилей, прежде чем добавлять её в конфигурацию бандла. Именно для этого полезен браузерный CSS-минификатор: вставьте CSS, получите минифицированный результат, скопируйте — и продолжайте работу.

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

Зачем использовать этот CSS Minifier?

Вставьте любой CSS и получите минифицированный результат за миллисекунды. Никаких конфигурационных файлов инструментов сборки, CLI-команд и учётных записей.

Сценарии использования CSS Minifier

Методы минификации CSS

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

Процент экономии зависит от входных данных. Файлы с большим количеством комментариев выигрывают больше от их удаления, тогда как уже компактный CSS даст меньший прирост. Наиболее надёжный результат достигается за счёт удаления пробелов и оптимизации сокращённых свойств. Продвинутые минификаторы, такие как cssnano, также объединяют дублирующиеся селекторы, сворачивают полные свойства в сокращённые (margin-top + margin-right + margin-bottom + margin-left → margin) и удаляют перекрытые объявления.

Минификация vs. Gzip-сжатие

Минификация и сжатие дополняют друг друга — они не взаимозаменяемы. Они работают на разных уровнях и суммируются:

Примеры кода

Как программно минифицировать CSS на разных языках и в разных средах:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

Часто задаваемые вопросы