Как упростить работу с модулями CSS в Next.js без ввода стилей. для каждого класса? ⇐ Html

[Anonymous]

Я работаю над проектом Next.js и использую модули CSS для стилизации отдельных компонентов (например, Login.module.css для компонента Login). Мой текущий рабочий процесс выглядит следующим образом:

• Сначала я пишу всю структуру HTML/TSX (или, по крайней мере, ее часть).
• Затем я перехожу к файлу модуля CSS и создаю все имена классов (все элементы CSS).
• Наконец, я возвращаюсь и заменяю все className="..." на

  Код: Выделить всё

  className={styles.className}

  .

Этот процесс немного утомительный, особенно по сравнению с простым написанием, например, className="titleLogin" напрямую.
Пример:

Код: Выделить всё

// What I’d prefer to do at first
Login title

// What I end up needing for CSS Modules
Login title

Стили набора текста. каждый раз замедляет работу во время верстки и прототипирования. Когда у меня есть несколько имен классов внутри div, это меня очень раздражает.
Мой вопрос:
Есть ли лучший или более эффективный способ работы с модулями CSS в Next.js, чтобы избежать необходимости вручную переписывать каждое имя класса со стилями. после создания разметки?
Я открыт для лучших практик, предложений по инструментам или советов по рабочему процессу, которые могут облегчить работу с модулями CSS. меньше повторений во время разработки.

Подробнее здесь: https://stackoverflow.com/questions/796 ... styles-for