Интуитивно понятный 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.