So nutzt du: Klassennamen-Generator
- Beschreibe den Bereich in einfachem Deutsch: was es ist (Hero, Features, Pricing, FAQ, Footer…) und was er enthält („Tagline, Überschrift, zwei Buttons, Bild rechts“, „3 Cards mit Icon und Link“).
- Wähle eine Namenskonvention: Client-First (das Webflow-System von Finsweet), BEM oder einfaches Simple-Kebab-Case. Die Struktur aktualisiert sich, während du tippst.
- Klicke auf eine beliebige Klasse im Baum, um sie zu kopieren, oder auf Alle kopieren für die vollständige Liste. Gestrichelte Klassen sind Combo-Klassen.
- Klicke auf Struktur nach Webflow kopieren und füge sie im Designer ein. Du erhältst den kompletten Elementbaum mit Klassen und Start-Layout-Styles. Alternativ öffne sie im HTML- & CSS-Konverter, um sie vorher zu bearbeiten.
Warum Klassennamen in Webflow wichtig sind
Jede Klasse, die du in Webflow anlegst, landet im Style Manager und im CSS der Website. Ohne System sammeln sich Namen wie div-block-47, Heading 3, hero-title und heroTitle nebeneinander – kaum wiederverwendbar und mühsam zu übergeben. Eine Namenskonvention macht Klassen vorhersehbar: Jeder im Team (oder ein Kunde Monate später) weiß, was pricing_plan-name ist und wo es verwendet wird.
Die drei Konventionen
| Client-First | BEM | Simple | |
|---|---|---|---|
| Bereich | section_hero | hero | hero-section |
| Element | hero_heading | hero__heading | hero-heading |
| Variante | button is-secondary | hero__button--secondary | button is-secondary |
| Layout | padding-global › container-large › padding-section-large | hero__container | container |
Client-First von Finsweet ist das in der Webflow-Community meistverbreitete System: Ein Unterstrich trennt den „Ordner“ (Komponente) vom Element – hero_content, hero_image-wrapper. Utility-Klassen übernehmen Typografie und Abstände (heading-style-h1, text-size-medium), und Combo-Klassen beginnen mit is-. BEM (Block, Element, Modifier) ist die klassische Front-End-Konvention und passt gut, wenn ein Team auch außerhalb von Webflow Code schreibt. Simple Kebab-Case reicht für kleine Websites.
Was der Generator erkennt
Er erkennt Bereichstypen (Hero, Features, Testimonials, Pricing, FAQ, Stats, Logos, Team, Steps, CTA, Navbar, Footer und mehr), Inhalte (Tagline, Überschrift, Unterüberschrift, Absatz, Buttons, Bild, Video, Formular, Liste, Badge), wiederkehrende Elemente mit Anzahl („3 Cards“, „sechs Fragen“, „4 Stats“) und Layout-Hinweise („Bild links“, „zentriert“, „zwei Spalten“). Buttons verwenden eine globale button-Klasse mit einer is-secondary-Combo – so funktionieren die meisten Webflow-Styleguides.
Vom Namen zum fertigen Bereich
Mit aktiviertem Start-Layout-CSS kommt die Struktur mit sinnvollen Standardwerten: Container-Breite, Bereichs-Padding, ein zweispaltiges Grid, das auf dem Tablet untereinander umbricht, Card-Grids, die auf dem Smartphone untereinander stehen, und ein Button-Stil. Kopiere sie nach Webflow, und du hast ein funktionierendes Grundgerüst, auf dem du weiterbauen kannst. Für Feinarbeit öffne sie im Tool HTML & CSS zu Webflow, passe den Code an und füge ihn ein. Prüfe danach die Seite mit dem Class Name Typo Checker auf Tippfehler, bevor du live gehst.
Tipps zur Benennung
- Benenne nach Zweck, nicht nach Aussehen:
pricing_planübersteht ein Redesign,blue-boxnicht. - Halte den Ordnernamen kurz und konsistent (
hero_,pricing_,footer_). - Nutze Combo-Klassen für Varianten desselben Elements (
is-featured,is-dark), neue Klassen für andere Dinge. - Verwende globale Klassen wieder (
button,container-large), statt pro Bereich eine neue anzulegen.
Auch gesucht als: webflow klassennamen, client-first klassennamen, bem namenskonvention, css klassennamen, webflow klassen benennen, css namenskonvention, webflow naming system, finsweet client-first.
Passende Tools zu: Klassennamen-Generator
- SVG zu Webflow — Füge ein SVG aus Figma ein und kopiere es als echte Webflow Custom Elements – jedes <svg>, <path> und <g> wird zu einem Element, das du im Navigator auswählen, mit Klassen versehen und bearbeiten kannst.
- Groß-/Kleinschreibung-Konverter — Füge einen beliebigen Text ein und wandle ihn zwischen 11 Groß-/Kleinschreibungsvarianten um – von „Title Case“ für Überschriften bis hin zu „camelCase“ und „snake_case“ für Code.
- Slug-Generator — Wandle jeden Titel in einen sauberen, kleingeschriebenen URL-Slug um – mit korrekter Transliteration von Akzenten, Umlauten und kyrillischer Schrift, optionalem Entfernen von Stoppwörtern und einem Massenmodus für ganze Listen.
- Klemmenrechner — Gib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen clamp() Wert mit einer Erklärung der Berechnung, einer Live-Vorschau und einer vollständigen Skalierung für flüssige Schriftgrößen oder Abstände.
Häufige Fragen
Was ist Client-First?
ordner_element (zum Beispiel hero_heading), globale Utility-Klassen für Typografie und Abstände sowie Combo-Klassen, die mit is- beginnen. Dieser Generator folgt seinen Konventionen, steht aber in keiner Verbindung zu Finsweet.Soll ich in Webflow Client-First oder BEM verwenden?
Nutzt das Tool KI?
Kann ich die Struktur direkt in Webflow einfügen?
Was sind die gestrichelten Klassen?
button is-secondary.