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

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

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

Настройка проекта

Перейдите в пустую папку, создайте файл с именем index.html и добавьте в него следующую HTML-разметку:

HTML>
<HTMLязык="ан">
<голова>
<связьотн.="таблица стилей"href="Источник/styles.css">
голова>


<тело>
<п>Параграфп>
<див>Дивдив>
тело>
HTML>

Этот HTML-документ отображает абзац и элемент. Он также импортирует файл таблицы стилей с именем стили.css

то есть внутри источник папка. Создайте файл в источник папку и включите следующие правила стиля CSS:

телоп {
цвет: апельсин;
}
телодив {
цвет: синий;
}
тело {
отображать: сетка;
}

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

Создание проекта Node.js и установка PostCSS

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

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

Чтобы использовать PostCSS, первое, что вам нужно сделать, это инициализировать новый проект Node.js:

инициализация npm -y

Эта команда создаст файл package.json, содержащий значения по умолчанию для вашего приложения.

Затем установите PostCSS и PostCSS CLI. Второй пакет позволяет запускать PostCSS из командной строки:

npm i --save-dev postcss postcss-cli

--save-dev флаг устанавливает оба пакеты нпм как зависимости разработчиков; вы будете использовать PostCSS и его плагины только для обработки кода CSS во время разработки.

Чтобы начать использовать PostCSS через Интерфейс командной строки, зайди в свой пакет.json файл и создайте простой сборка: css команда для транспиляции с PostCSS:

"скрипты": {
"сборка: css": "postcss src/styles.css --dir dest -w"
}

Эта команда возьмет ваш голый CSS (хранящийся в источник/styles.css), транспилируйте код, а затем выведите его в пункт назначения папка. Запуск сборка нпм: css Команда создает эту папку и заполняет ее стили.css файл, содержащий читаемый браузером код.

Когда вы импортируете свой CSS в HTML, убедитесь, что вы импортируете из папки назначения, в которой вы компилируете свой CSS, а не из исходной папки, из которой компилируется PostCSS. Это, в нашем случае, расстояние папка, а не источник папка.

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

Использование плагинов PostCSS

Есть сотни Плагины PostCSS для добавления префиксов, линтинга, поддержки нового синтаксиса и десятков других функций в PostCSS. После установки плагина PostCSS вы активируете его внутри postcss.config.js file — файл JavaScript, который вы можете использовать для настройки всех конфигураций PostCSS.

Установите cssnano Плагин PostCSS с помощью следующей команды:

npm i --save-dev cssnano

Еще раз, вам нужно только сохранить эти зависимости как зависимости dev. Причина в том, что все это происходит по мере вашего развития. Вам не нужен PostCSS или какой-либо из его плагинов после запуска сайта в производство.

Чтобы использовать недавно установленный плагин cssnano, вы должны добавить следующий код в файл postcss.config.js файл:

константа cssnano = требовать("ксснано")
модуль.экспорт = {
 плагины: [
 cssnano({
 предустановка: «по умолчанию»
 })
 ]
}

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

Использование современных функций, таких как вложение

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

тело {
 & п {
цвет: апельсин;
 }
}

Этот код совпадает с версией в вашем начальном коде. Но это вызовет ошибку, потому что синтаксис очень новый, и большинство веб-браузеров его не поддерживают. Вы можете включить поддержку этого синтаксиса в PostCSS, установив postcss-preset-env плагин.

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

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

Чтобы установить плагин, выполните следующую команду:

npm i --save-dev postcss-preset-env

Тогда в вашем postcss.config.js файл, вы должны импортировать плагин и зарегистрировать его:

константа cssnano = требовать("ксснано")
константа postcssPresetEnv = требовать("postcss-preset-env")
модуль.экспорт = {
 плагины: [
 cssnano({
 предустановка: «по умолчанию»
 }),
 postcssPresetEnv({ этап: 1})
 ]
}

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

Использование PostCSS с фреймворками

Настройка PostCSS вручную может быть немного болезненной. Вот почему почти все современные фреймворки поставляются с инструментами для связывания (например, Vite, Snowpack и Parcel), и эти инструменты будут иметь встроенную поддержку PostCSS. И даже если они этого не сделают, процесс добавления поддержки PostCSS невероятно прост.

Всегда помните, что Vite и большинство других сборщиков используют Модульная система ES6, а не CommonJS. Чтобы обойти это, вам нужно использовать Импортировать заявление вместо требовать() в вашей postcssconfig.js файл:

Импортировать cssnano от"ксснано"
// Здесь находится код конфигурации

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

Узнайте больше о SaSS

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

Обучение использованию другого крупного препроцессора может пригодиться разработчику CSS.