Если после подключения Pure CSS страница выглядит как обычный нестилизованный HTML — без сетки, кнопок и оформленных форм — первым делом откройте инструменты разработчика (клавиша F12) и проверьте вкладку Network: файл pure-min.css либо не загружается вообще (статус 404), либо блокируется. Именно сбой на этапе загрузки — самая частая причина, по которой Pure «не работает».
Проблема почти всегда сводится к одному из четырёх сценариев: неверный путь к файлу, конфликт с другими стилями, отсутствие обязательных классов в разметке или устаревший кэш браузера. Ниже разберём каждый сценарий и порядок безопасной диагностики, который не требует изменения рабочего кода «вслепую».
Как устроен Pure и почему он «молчит»
Pure CSS — лёгкий модульный фреймворк от Yahoo, состоящий из отдельных модулей: base, grids, forms, buttons, tables, menus. Важная особенность: Pure не применяет оформление автоматически к обычным тегам. Кнопка станет стилизованной только если ей явно задан класс pure-button, форма — класс pure-form, а сетка работает через классы pure-g и pure-u-*.
Поэтому ситуация «Pure подключён, но ничего не изменилось» часто означает не поломку, а отсутствие нужных классов в HTML. Проверьте разметку: голый <button> без класса так и останется стандартной кнопкой браузера.
Pure — классовый фреймворк: стили применяются только к элементам с соответствующими классами. Подключения файла самого по себе недостаточно.
Проверка подключения файла
Начните с базовой проверки — действительно ли браузер получает файл стилей. Откройте DevTools, перейдите на вкладку Network, обновите страницу и найдите запрос к pure-min.css. Статус должен быть 200. Если видите 404 — путь указан неверно, если (blocked) — файл блокируется политикой безопасности или расширением.
Типовое подключение через CDN выглядит так:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss/build/pure-min.css">При локальном подключении убедитесь, что путь в атрибуте href совпадает с реальным расположением файла относительно HTML-документа. Распространённая ошибка — файл лежит в папке css/, а в разметке указан путь без этой папки.
- 🔍 Проверьте статус загрузки файла во вкладке Network
- 📁 Сверьте путь в
hrefс реальной структурой папок проекта - 🔗 Убедитесь, что тег
<link>находится внутри<head>, а не в<body> - 🧱 Проверьте, нет ли опечатки в имени файла:
pure-min.cssиpure.min.css— разные файлы
Конфликты с другими стилями
Если файл загружается, но элементы выглядят не так, как в документации, вероятна проблема специфичности и порядка подключения. CSS применяет правила по приоритету: более специфичный селектор или более позднее правило с равным весом перекрывает предыдущее. Если ваш собственный stylesheet подключён после Pure и содержит правила для тех же элементов, он «затрёт» стили фреймворка.
Проверить это просто: в DevTools выделите проблемный элемент и посмотрите панель Styles. Перечёркнутые правила показывают, какое свойство было переопределено и из какого файла пришёл «победитель». Если видите, что правила Pure зачёркнуты вашими — либо повышайте специфичность осознанно, либо меняйте порядок подключения.
⚠️ Внимание: не добавляйте !important массово ради «починки» — это создаёт лавину конфликтов, которую потом почти невозможно распутать. Сначала найдите конкретное перекрывающее правило через DevTools.
Отдельный случай — совместное использование Pure с другим фреймворком, например Bootstrap. Оба задают базовые стили для кнопок, форм и таблиц, и итог зависит от порядка подключения. Если мигрируете с одного фреймворка на другой, старый файл стилей лучше отключить полностью, а не оставлять «на всякий случай».
Проблемы с сеткой Pure Grids
Сетка — самый капризный модуль. Типичная жалоба: колонки pure-u-1-2 встают друг под другом вместо одной строки. Возможная причина — отсутствие родительского контейнера pure-g: без него юниты сетки не выстраиваются в ряд. Структура должна быть строго вложенной: контейнер pure-g, внутри него — только элементы pure-u-*.
Вторая тонкость — пробелы и переносы строк между элементами сетки могут создавать видимые зазоры между колонками, из-за чего раскладка «разъезжается». Это следствие inline-block-механики, на которой построены классические Pure Grids. Решения: убирать пробелы между тегами колонок, комментировать переносы или использовать responsive-вариант сетки pure-grids-responsive согласно документации вашей версии.
<div>
<div>...</div><div>...</div>
</div>
☑️ Диагностика сетки Pure
Кэш браузера и сборщики
Вы исправили CSS, но страница выглядит по-старому? Виноват кэш. Браузер может держать старую версию pure-min.css или вашего файла стилей. Выполните жёсткое обновление: Ctrl+F5 (Windows) или Cmd+Shift+R (macOS). В DevTools при открытой панели можно включить опцию отключения кэша на вкладке Network.
Если проект собирается через Webpack, Vite или другой сборщик, добавляется ещё один уровень: Pure должен быть корректно импортирован в бандл, например через import 'purecss'; в точке входа при установке через npm. Если импорт отсутствует или сборщик вырезает «неиспользуемые» стили (purge-инструменты), часть классов Pure может не попасть в итоговый CSS. Проверьте, что purge-конфигурация видит ваши шаблоны, иначе она удалит классы, которые встречаются только в динамически генерируемой разметке.
Добавьте к URL локального CSS параметр версии, например styles.css?v=2 — это принудительно сбросит кэш у всех посетителей после обновления файла.
Сравнение типовых симптомов и причин
| Симптом | Вероятная причина | Что проверить |
|---|---|---|
| Стили вообще не применяются | Файл не загружается | Статус в Network, путь в href |
| Файл загружен, страница «голая» | Нет классов Pure в разметке | Наличие pure-button, pure-form и т.д. |
| Элементы выглядят «не так» | Перекрытие другими стилями | Панель Styles, порядок link-тегов |
| Колонки встают друг под другом | Нет контейнера pure-g | Структура вложенности сетки |
| Изменения в CSS не видны | Кэш браузера или сборщика | Жёсткое обновление, пересборка |
⚠️ Внимание: при работе через CDN учитывайте, что без интернет-соединения или при недоступности CDN страница останется без стилей. Для production-проектов надёжнее хостить файл локально или через собственную сборку.
Когда ничего не помогло
Если все проверки пройдены, а Pure по-прежнему ведёт себя странно, сведите проблему к минимуму. Создайте отдельный тестовый HTML-файл: только <head> с одним подключением Pure и пара элементов с классами фреймворка в <body>. Если в изоляции всё работает — проблема в вашем проекте: подключайте свои файлы и скрипты обратно по одному, пока не найдёте источник конфликта.
Также проверьте версию фреймворка. Названия классов и состав модулей могли меняться между версиями, поэтому сверяйтесь с документацией именно той версии, которая подключена у вас, а не с первым попавшимся примером из сети. Пример кода для Pure одной версии может не работать на другой.
Как точно узнать версию подключённого Pure
Откройте файл pure-min.css в браузере или редакторе — в шапке файла обычно указан комментарий с версией и ссылкой на проект. При установке через npm версию покажет файл package.json или команда npm list purecss.
Метод изоляции — универсальный инструмент: минимальная тестовая страница отделяет проблемы фреймворка от проблем вашего проекта.
Частые вопросы
Можно ли использовать Pure вместе с Bootstrap?
Технически да, но оба фреймворка стилизуют одни и те же элементы, поэтому результат зависит от порядка подключения и специфичности. Практичнее выбрать один фреймворк либо подключать только отдельные модули Pure, не пересекающиеся с Bootstrap.
Почему кнопка не стала синей после подключения Pure?
Базовый класс pure-button даёт нейтральное оформление. Акцентные цвета задаются дополнительными классами, например pure-button-primary, причём часть таких классов требует подключения соответствующего CSS из документации.
Работает ли Pure без интернета?
Да, если файл подключён локально. При подключении через CDN без сети стили загружаться не будут — скачайте файл и положите его в проект.
Почему между колонками сетки появляются зазоры?
Из-за пробельных символов между inline-block элементами. Уберите переносы строк между тегами колонок или воспользуйтесь рекомендациями из документации вашей версии Pure по борьбе с этим эффектом.
Нужно ли подключать JavaScript для работы Pure?
Нет, Pure — чисто CSS-фреймворк и не содержит JavaScript. Если какой-то компонент (например, выпадающее меню) требует интерактивности, её реализуют самостоятельно.