Интуитивно понятный Utility-First CSS в Nuxt.js с Stylify
Чистый CSS на стероидах. С легкостью оформляйте свое приложение Nuxt.js с помощью CSS, например селекторов Utility-First, не задумываясь.
Nuxt.js — отличный инструмент для создания приложений SPA и SSR с использованием Vue.js. Если вы хотите стилизовать приложение, вы можете использовать различные фреймворки и препроцессоры.
Я лично предпочитаю чистый CSS или SCSS, а не утилитарные фреймворки. Хотя синтаксис немного длиннее, чем у селекторов с именами и сокращениями.
Проблема с написанием CSS вручную в том, что это медленно. Также легко получить дубликат CSS property:value
в различных селекторах, что приводит к увеличению размера CSS.
Из-за этого я создал Stylify CSS:
- Он динамически генерирует полезный CSS на основе того, что я пишу.
- Селекторы такие же, как в чистом CSS.
- Всего два правила.
__
вместо пробела и^
вместо кавычки. - И есть множество других функций, таких как разделение кода, минимизация селекторов, динамические экраны, сгенерированный CSS по запросу и т. д. Не стесняйтесь проверить Stylify docs.
В этой статье я покажу вам, как использовать его в Nuxt.js 🤟.
Монтаж
Stylify предоставляет @stylify/nuxt-module, который упрощает процесс интеграции до минимума:
Когда Stylify установлен, добавьте модуль Nuxt в раздел buildModules
в nuxt.config.js
.
Вот и все. Теперь вы можете начать использовать Stylify для оформления своего приложения Nuxt.js 🤩.
Первый CSS
Откройте каталог pages/index.vue
, скопируйте в него следующий контент и запустите команду dev:
Поздравляем, вы создали свою первую страницу!
Очистка и настройка
Когда количество селекторов в подходе, ориентированном на полезность, начинает увеличиваться, это может превратиться в огромный нечитаемый беспорядок, от которого бэкенд-инженеры плачут днем и ночью, когда видят это.
Поэтому у нас есть компоненты. Компоненты могут быть определены в трех местах:
- В файле, где они используются.
- В файле
stylify.config.js
. - Внутри
nuxt.config.js
в разделе Stylify.
Давайте определим добавление компонента заголовка в index.vue, так как он используется только здесь:
Теперь давайте добавим компонент-контейнер в stylify.config.js
, потому что он, вероятно, будет использоваться во всем проекте.
Создайте stylify.config.js
:
Иногда необходимо стилизовать элементы глобально. Это можно сделать с помощью plainSelectors:
Переменные используются почти в каждом коде. В CSS это не отличается. Итак, добавим переменную:
Теперь мы можем использовать переменную в наших селекторах во всем проекте:
Результат
Stylify создает файл stylify.css в каталоге ресурсов. CSS максимально повторно использует каждый селектор, чтобы избежать дублирования properties:values
. В производственном режиме (создание, сборка) он также искажает селекторы.
Сжатый HTML:
Сгенерированный CSS:
Минифицированный CSS:
Дайте мне знать, что вы думаете!
Stylify — это способ писать чистый CSS быстрее и удобнее. Для меня это более эффективный подход, чем писать вручную.
Но я понимаю, что это может быть не для всех, и поэтому я буду рад любому отзыву, идее, вопросу, мысли или проблеме 🙂.
Оставайтесь на связи:
👉 @8machy
👉 @stylifycss
👉 Stylifycss.com
👉 dev.to/machy8
👉 medium.com/@8machy
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.