Стилизуйте свой веб-сайт Next.js быстрее, эффективнее и интуитивно с помощью Stylify. Не изучайте селекторы и синтаксис. Используйте чистый синтаксис CSS и получайте автоматически сгенерированный CSS с расширенной оптимизацией для производства.
Для более легкого старта вы можете посетить Игровую площадку Stylify Stackblitz 🎮.
Введение
Stylify динамически генерирует CSS на основе того, что вы пишете. Синтаксис аналогичен CSS property:value. Определенные утилиты комбинируются с селекторами компонентов и в производственной среде минимизированы до минимума, например, от .color\:red,.button {color:red} до _zx, _ga{color:red}.
С Stylify вы можете получить очень маленькие пакеты, создать дополнительные фрагменты CSS с отложенной загрузкой и стилизовать страницу, написав HTML и селекторы 🤟.
Настройка Next.js
Самый простой способ настроить Next.js — использовать CLI:
- Беги
yarn create next-app - Выберите название вашего проекта
Таким образом вы получите скелет приложения Next.js по умолчанию.
Стилизация интеграции
Установите пакет @stylify/unplugin с помощью NPM или Yarn:
yarn add @stylify/unplugin
npm i @stylify/unpluginОткройте next.config.js и скопируйте в него следующее содержимое:
Последний шаг, откройте pages/_app.js и добавьте путь к stylify.css:
Стилизация веб-сайта
Если вы скопируете приведенный ниже код в pages/index.js и запустите yarn dev, вы получите стилизованный текст Hello World!:
Stylify отслеживает любые изменения в файлах js и генерирует CSS в файлы styles/stylify.css.
Если вы добавите селектор, например font-size:24px, CSS будет автоматически обновлен 🎉.
Попробуйте Stylify прямо на Stackblitz.com 💡.
Компоненты
Шаблоны, раздутые селекторами утилит, трудно читать. Stylify позволяет вам определять компоненты непосредственно в файлах, где они используются через параметры содержимого (представьте объект JavaScript без скобок) или в конфигурации компилятора.
Переменные
Рекомендуется избегать жестко запрограммированных значений в селекторах. Переменные могут быть определены так же, как и компоненты:
Производственная сборка
Когда мы запускаем производственную сборку, используя yarn build + yarn start, разметка JSX будет искажена следующим образом:
CSS тоже укорочен:
Настройте все, что вам нужно
Приведенные выше примеры не включают в себя все, что может сделать Stylify:
- Вы можете сопоставить вложенные файлы в шаблон
- Стиль глобальные селекторы
- Определить пользовательские экраны
- Добавьте собственные макросы, например
ml:20pxдля поля слева - И многое другое
Не стесняйтесь ознакомиться с документами, чтобы узнать больше 💎.
Дайте мне знать, что вы думаете!
Буду рад любым отзывам! Stylify — это все еще новая библиотека, и есть много возможностей для улучшения 🙂.
Оставайтесь на связи:
👉 @8machy
👉 @stylifycss
👉 stylifycss.com
👉 dev.to/machy8
👉 medium.com/@8machy
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
