Allgemeine Benennungsregeln für CSS-Klassen und IDs

Öffentlicher Name der Seite:

• #wrapper - - Der äußere Rand der Seite steuert die Gesamtlayoutbreite
• #container oder #content – ​​Container, wird für die äußerste Ebene verwendet
• #layout - - Layout
• #head, #header - - Kopfzeilenabschnitt
• #foot, #footer – Fußzeilenabschnitt
• #nav - - Hauptnavigation
• #subnav - - Sekundärnavigation
• #menu - - Menü
• #submenu - - Untermenü
• #Seitenleiste - - Seitenleiste
• #sidebar_a,#sidebar_b – Linke oder rechte Seitenleiste
• #main - - Der Hauptteil der Seite
• #tag - - Schlagwörter
• #msg, #message - - Sofortnachricht
• #Tipps - - Tipps
• #vote - - Abstimmen
• #friendlink - - Freundschaftslinks
• #title - - Titel
• #summary - - Zusammenfassung
• #loginbar - - Anmeldeleiste
• #searchInput - - Sucheingabefeld
• #hot - - Heiße Hotspots
• #search - - Suche
• #search_output – Die Suchausgabe ähnelt den Suchergebnissen
• #searchBar - - Suchleiste
• #search_results - - Suchergebnisse
• #copyright - - Copyright-Informationen
• #branding - - Markenbildung
• #logo - - Website-Logo
• #siteinfo - - Site-Informationen
• #siteinfoLegal - - Rechtliche Hinweise
• #siteinfoCredits - - Credits
• #joinus - Mach mit
• #partner - - Partner
• #Dienst - - Dienst
• #regsiter - - Registrieren
• arr/arrow - - Pfeil
• #Gilde - - Leitfaden
• #sitemap - - Sitemap
• #list - - Liste
• #homepage - - Startseite
• #subpage - - Unterseite der zweiten Ebene
• #tool，#toolbar - - Symbolleiste
• #drop - - Herunterfallen
• #dorpmenu - - Dropdown-Menü
• #status - - Status
• #scroll - - Scroll
• .tab - - Registerkarten
• .left,.right,.center - - Mitte, links, rechts
• .news - - Nachrichten
• .download - - Herunterladen
• .banner - - Werbebanner (Top-Banner)
• Im Zusammenhang mit E-Commerce:
• .products - - Produkte
• .products_prices - Produktpreise
• .products_description - Produktbeschreibung
• .products_review - - Produktbewertungen
• .editor_review - - Überprüfung durch den Herausgeber
• .news_release - - Neueste Veröffentlichungen
• .publisher - - Produzent
• .screenshot - - Miniaturansicht
• .faqs - Häufig gestellte Fragen
• .keyword - - Schlüsselwort
• .blog - - Blog
• .forum - - Forum

Grundlegende Benennung:

• Wrap - - Für die äußerste Schicht
• Header - - Für Header
• Hauptinhalt - - wird für den Hauptinhalt (Mitte) verwendet
• main-left - - Linkes Layout
• Haupt-rechts - - Rechtes Layout
• Navigationsleiste nav - - Menünavigationsleiste der Webseite
• Inhalt - wird für den Hauptteil der Webseite verwendet
• Fußzeile - - wird für den unteren Teil verwendet

Benennung der CSS-Datei:

• master.css, style.css - - Hauptseite
• module.css - - Modul
• base.css - - Grundlegendes allgemeines
• layout.css - - Layout, Layout
• themes.css - - Themen
• columns.css - - Spalten
• font.css - - Text, Schriftarten
• forms.css - - Formulare
• mend.css - - Patch
• print.css - - Drucken

Namensvorschläge:

Unabhängig davon, ob die Benennung nach dem Selektor „.“ (Kleinpunkt) oder dem Selektor „#“ (Raute) erfolgt, können wir abschließend feststellen, dass die Haupt-, wichtigen, speziellen und äußersten Felder nach dem Selektor „#“ (Raute) und die übrigen nach dem Selektor „.“ (Kleinpunkt) benannt sind. Dabei wird berücksichtigt, dass die benannten CSS-Selektoren in HTML wiederverwendet werden sollen.

Damit ist dieser Artikel über die häufig verwendeten Benennungsregeln für CSS-Klassen und IDs abgeschlossen. Weitere Informationen zu den Benennungsregeln für CSS-Klassen und IDs finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!