So optimieren Sie die Arbeit mit CSS-Modulen in Next.js, ohne Stile einzugeben. für jede Klasse? ⇐ HTML

[Anonymous]

Ich arbeite an einem Next.js-Projekt und verwende CSS-Module zum Gestalten einzelner Komponenten (z. B. Login.module.css für eine Login-Komponente). Mein aktueller Arbeitsablauf sieht so aus:

• Ich schreibe zuerst die gesamte HTML/TSX-Struktur (oder zumindest einen Teil davon).
• Dann springe ich zur CSS-Moduldatei und erstelle alle Klassennamen (alles CSS-Zeug).
• Schließlich gehe ich zurück und ersetze jeden className="..." durch

  Code: Select all

  className={styles.className}

  .

Dieser Vorgang ist etwas mühsam, insbesondere im Vergleich zum direkten Schreiben von beispielsweise className="titleLogin".
Beispiel:

Code: Select all

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

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

Schreibstile. verlangsamt mich jedes Mal beim Layouten und Prototyping. Wenn ich mehrere Klassennamen in einem div habe, ärgert es mich wirklich.
Meine Frage:
Gibt es eine bessere oder effizientere Möglichkeit, mit CSS-Modulen in Next.js zu arbeiten, um zu vermeiden, dass nach dem Erstellen des Markups jeder Klassenname manuell mit Stilen neu geschrieben werden muss?
Ich bin offen für Best Practices, Toolvorschläge oder Workflow-Tipps, die die Arbeit mit CSS erleichtern können Module, die sich während der Entwicklung weniger wiederholen.