Введение

Stylify динамически генерирует CSS на основе того, что вы пишете. Синтаксис похож на css property:value. Определенные утилиты комбинируются с селекторами компонентов и в процессе производства минимизируются до минимума, например, от .color\:red,.button {color:red} до _zx, _ga{color:red}.

С Stylify вы можете оставаться в шаблонах Twig или файлах PHP, писать селекторы и получать наименьшие фрагменты CSS для каждой страницы отдельно 🤟

Быстрая настройка Symfony

Самый простой способ начать — использовать пакеты Symfony Skeleton и Webapp.

Добавьте HpController src/Controller/HpController.php

и шаблон главной страницы templates/hp.html.twig.

Стилизация интеграции

Установите универсальный плагин Stylify.

Обновите файл webpack.config.js. Импортируйте Stylify, добавьте плагин и запись стиля hp.

Измените app.css в assets/app.js на «layout.css» и добавьте ссылку css в файл hp.html.twig.

Стилизация веб-сайта

После завершения настройки отредактируйте hp.html.twig

и запустите npm run dev.

Stylify найдет селектор color:blue и сгенерирует для него css. .color\:blue{color:blue} в homepage.css.

Некоторый код часто необходимо повторно использовать на нескольких страницах. Раздувать шаблоны утилитами и жестко запрограммированными юнитами в селекторах — не лучшая идея. Давайте определим компонент container и некоторые переменные.

Откройте webpack.config.js и отредактируйте конфигурацию плагина Stylify:

Теперь мы можем обновить base.html.twig

и hp.html.twig

Иногда некоторые компоненты используются только в одном месте. Не имеет смысла определять их в файле webpack.config.js. Мы также можем определять компоненты, переменные и т. д. непосредственно в файле, в котором они используются. Для этого в Stylify есть параметры контента.

Давайте добавим компонент абзаца в hp.html.twig:

Производственная сборка

Когда мы запускаем сборку для производства npm run build, Stylify автоматически искажает все распознанные селекторы и генерирует оптимизированный CSS.

Оптимизировано hp.html.twig:

Оптимизирован hp css:

Пример также можно найти на сайте Stylifycss.com.

Настройте все, что вам нужно

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

Не стесняйтесь оформить заказ, чтобы узнать больше 💎.

Дайте мне знать, что вы думаете!

Буду рад любым отзывам! Stylify — это все еще новая библиотека, и есть много возможностей для улучшения 🙂.

Оставайтесь на связи:
👉 @8machy
👉 @stylifycss
👉 Stylifycss.com
👉 dev.to/machy8
👉 medium.com/@8machy