CSS-Benennungsregeln, Website-Design und grundlegende Framework-Struktur

1. Website-Design und grundlegende Framework-Struktur:

1. Container

„Container“ ist der Teil, der alle Elemente auf der Seite zusammenfasst Benannt: „wrapper“, „wrap“, „page“.

2. Header
„Header“ ist der Kopfbereich der Website-Seite. Er enthält im Allgemeinen das Logo der Website und einige andere Elemente. Dieser Teil kann auch „page-header“ (oder pageHeader) genannt werden.
3. Navbar
„navbar“ entspricht einer horizontalen Navigationsleiste und ist das typischste Webseitenelement. Dieser Teil kann auch benannt werden: „nav“, „navigation“, „nav-wrapper“.
4. Menü
Der Bereich „Menü“ enthält allgemeine Links und Menüs. Dieser Teil kann auch benannt werden: „subNav“. ", "links", "sidebar-main".
5. Main
„Main“ ist der Hauptbereich der Website. Wenn es sich um einen Blog handelt, enthält er das Protokoll. Dieser Abschnitt kann auch benannt werden: „content“, „main-content“ (oder „mainContent“).
6. Seitenleiste
Der Teil „Seitenleiste“ kann sekundäre Inhalte der Website enthalten, z. B. eine Liste kürzlich aktualisierter Inhalte, eine Einführung in die Website oder Werbeelemente usw. Dieser Teil kann auch benannt werden : „subNav“, „side-panel“, „secondary-content“.
7. Footer
„Footer“ enthält einige zusätzliche Informationen der Website, dieser Teil kann auch benannt werden: „Copyright“.

2. Mehrere Punkte, die Sie beachten sollten:

1. Versuchen Sie, dem Element einen eigenen Namen oder eine eigene Funktion oder „Intention“ zu geben, um Semantik zu erreichen. Verwenden Sie keine oberflächlichen Namen.

Wie zum Beispiel: rot/links/groß usw.

2. Benennungsregeln für Kombinationen:

[Elementtyp]-[Elementfunktion/-inhalt]

Zum Beispiel: Suchschaltfläche: btn-search
Anmeldeformular: form-login
Nachrichtenliste: list-news

3. Benennung von Elementen mit interaktivem Verhalten:

Elemente mit interaktivem Verhalten haben normalerweise unterschiedliche Stile wie „Normal“, „Hover“, „Klicken“ und „Durchsucht“. die folgenden Regeln:

Mauszeiger:: Hover Klicken: Klicken Angesehen: besucht
Wie zum Beispiel: Suchschaltfläche: btn-search, btn-search-hover, btn-search-visited

3. Zusammenfassung häufig verwendeter Namen:

Kopfzeile: Kopfzeile

Anmeldeleiste: Anmeldeleiste

Logo: Logo
Seitenleiste: Seitenleiste
Werbung Streifen :banner
navigation:nav
sub-navigation:subNav
menu:menu
submenu:subMenu
drop-down-menü:dropMenu
toolbar: toolbar
form:form
Spalte:Spalte
Pfeil:Pfeil
Suche:Suche
Suchschaltfläche:btn-search
Bildlaufleiste:Bildlauf
Inhalt:Inhalt
Tab:Tab
Artikel list :list
Eingabeaufforderungsinformationen:msg
Tipps:tips
Spaltentitel:title
Links:links
Fußzeile:footer
Service:service
Hotspot:hot
News: news
Download: download
Registrieren: regsiter
Status: status
Button: btn
Abstimmung: vote
Partner: Partner
Copyright: copyright
Sitemap: Sitemap

Andere Regeln für die Benennung von Referenzen

Kopfzeile: Kopfzeile

Anmeldeleiste: Anmeldeleiste
Logo: Logo
Seitenleiste: Seitenleiste
Werbung: Banner
Navigation: Navigation
Unternavigation: Unternavigation
Menü: Menü
Untermenü: Untermenü
Suche: Suche
Scrollen: Scrollen
Seitentext: Hauptseite
Inhalt: Inhalt
Tab: Tab
Artikelliste: Liste
Eingabeaufforderung: msg
Tipps: Tipps
Spaltentitel: Titel
Beitreten: joinus
Anleitung:Gilde
Service: Service
Hotspot: hot
News: news
Download: download
Registrieren: regsiter
Status: status
Button: btn
Abstimmung: vote
Partner: Partner
Freundlicher Link: Friendlink
Fußzeile: Fußzeile
Copyright: Copyright

CSS-ID-Benennung

Coat: Wrap
Hauptnavigation: Mainnav
Unternavigation: Subnav
Fußzeile: Fußzeile
Gesamte Seite: Inhalt
Kopfzeile: Kopfzeile
Fußzeile: Fußzeile
Marke: Label
Titel: Titel
Hauptnavigation: mainbav (globalnav)
Oben Navigation: topnav
Seitennavigation: Seitenleiste
Linke Navigation: linke Seitenleiste
Rechte Navigation: rechte Seitenleiste
Flagge: Logo
Slogan: Banner
Menüinhalt 1: menu1content
Menükapazität: menucontainer
Untermenü: Untermenü
Seitennavigationssymbol: sidebarIcon
Hinweis: Hinweis
Breadcrumb: Breadcrumb (d. h. der Speicherort der Seite) Navigationstipps)
Container: Container
Inhalt :  Inhalt
Suche:  Suche
Anmelden:  Anmelden
Multifunktionsleiste:  Shop (z. B. Warenkorb, Kasse)
Aktuell aktuell

Anmerkungen, die beim Bearbeiten von Stylesheets verfügbar sind, können wie folgt geschrieben werden:
<-- Fußzeile -->
Inhaltsbereich
<-- Endfußzeile -->

Stildateibenennung

Hauptmaster.css
Layout, layout.css
Spalten columns.css
Textschriftart.css
Druckstil print.css
Thementhemen. css

Beispiel:

wird von derselben Firma entwickelt und die CSS-Namensschlüsselwörter sind speziell wie folgt festgelegt:

Container: Container/Box
Header: Header
Hauptnavigation: mainNav
Unternavigation: subNav
Obennavigation: topNav
Website-Logo: Logo
Große Werbung: Banner
Mitte der Seite: mainBody
Unten: Fußzeile
Menü: Menü
Menüinhalt: menuContent
Untermenü: subMenu
Untermenüinhalt: subMenuContent
Suche: Suche
Suchschlüsselwort: Schlüsselwort
Suchbereich: Bereich
Tag-Text: tagTitle
Tag-Inhalt: tagContent
Aktuelles Tag: tagCurrent/currentTag
Titel: Titel
Inhalt: content
Liste: list
Aktuelle Position: currentPath
Seitenleiste: Seitenleiste
Symbol: Symbol
Hinweis: Hinweis
Anmelden: anmelden
Registrieren: registrieren
Spaltendefinition: Spalte_1von3 (die erste von drei Spalten)
Spalte_2von3 (die zweite der drei Spalten) Spalte)
column_3of3 (die dritte Spalte von drei)