CSS naming rules website design and basic framework structure

I. Website design and basic framework structure:

1. Container
"Container" is the part where all the elements of a page are wrapped together, and this section can also be named: "Wrapper", "Wrap", "page".
2. Header
"Header" is the head area of the site page, generally, it contains the website logo and some other elements. This section can also be named: "Page-header" (or PageHeader).
3. Navbar
"NavBar" is equivalent to the horizontal navigation bar, which is the most typical page element. This section can also be named: "Nav", "Navigation", "Nav-wrapper".
4. Menu
The menu area contains general links and menus, which can also be named: "Subnav", "Links", "Sidebar-main".
5. Main
"Main" is the main area of the site and, if it is a blog, it will contain the logs. This section can also be named: "Content", "main-content" (or "maincontent").
6. Sidebar
The "Sidebar" section can contain minor content from the site, such as a list of recently updated content, an introduction to the site, or an ad element ... This section can also be named: "Subnav", "Side-panel", "secondary-content".
7. Footer
"Footer" contains some additional information about the site, which can also be named: "Copyright."

Two. Points to note:

1. Consider the role or "intention" of the element by naming itself as a semantic. Do not use surface-style naming.
such as: Red/left/big and so on.

2. Combining naming conventions:
[Element type]-[element action/content]
Such as: Search button: Btn-search
Login form: Form-login
News list: List-news

3. Names of elements that involve interactive behavior:
All elements that involve interactive behavior typically have different styles, such as normal, hover, click, and browse, and the naming can refer to the following rules:
Hover:: Hover Click: Click Browse: Visited
Such as: Search button: Btn-search, Btn-search-hover, btn-search-visited

Three, commonly used naming summary:

Page Header: Header
Login Strip: Loginbar
Logo: Logo
Sidebar: Sidebar
AD strip: Banner
Navigation: Nav
Sub-navigation: Subnav
Menus: Menu
Sub-menu: submenu
Drop-down menu: Dropmenu
Tool bar: Toolbar
Forms: Form
Column: Column
Arrows: Arrow
Searches: Search
Search button: Btn-search
Scroll bar: Scroll
Contents: Content
Tabs page: Tab
Article List: List
Hint Message: MSG
Tip: Tips
Column Title: Title
Link: Links
Footer: Footer
Services: Service
Hotspot: Hot
Press: News
Download: Download
Registration: Regsiter
State: Status
Button: BTN
Vote: Vote
PARTNER: Partner
Copyrights: Copyright
Site Map: Sitemap

Additional reference naming rules
Header: Header
Login: Loginbar
Flag: Logo
Sidebar: sidebar
ad: Banner
Navigation: Nav
Sub-navigation: Subnav
Menus: Menu
Submenu: submenu
Search: Searches
Scrolling: Scroll
Page body: main
Content: Content
Tabs: Tab
Article listing: List
Tip: Msg
Tips: Tips
Column title: Title
Join: Joinus
Guide: Guild
Services: Service
Hotspot: Hot
News: News
Download: Download br> registration: Regsiter
State: Status
Button: BTN
vote: Vote
Partner: Partner
Links: Friendlink
Footer: Footer
Copyrights: Copyright

Name of CSS ID
Jacket: Wrap
Main navigation: Mainnav
Sub-navigation: Subnav
Footer: Footer
Entire page: Content
Headers: Header
Footer: Footer
Trademark: Label
Caption: Title
Main navigation: Mainbav (GLOBALNAV)
Top Navigation: Topnav
Side navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Flag: Logo
Slogan: Banner
Menu Content 1:menu1content
Menu Capacity: Menucontainer
Sub-menu: submenu
Edge navigation icon: Sidebaricon
Note: note
Breadcrumbs: breadcrumb (i.e. navigation tips for page location)
Container: Container
Contents: Content
Searches: Search
Login: Login
Functional area: Shop (e.g. shopping cart, cashier)
The current

In addition, the annotations that are available when you edit the style sheet can be written like this:
<--Footer--
Content Area
<--End Footer--

Style file naming
The main master.css
Layout, Layout layout.css
Column Columns.css
Text Font.css
Print style Print.css
Theme Themes.css

Instance:
For the same development, set CSS naming keywords as follows:

Container: Container/box
Head: Header
Main navigation: Mainnav
Sub-navigation: Subnav
Top Navigation: Topnav
Website Logo: Logo
Big AD: Banner
Page Middle: mainbody
Bottom: Footer
Menus: Menu
Menu Contents: menucontent
Sub-menu: submenu
Sub-menu Contents: submenucontent
Searches: Search
Search keywords: keyword
Search Range: Range
Tag text: Tagtitle
Tag content: tagcontent
Current tag: Tagcurrent/currenttag
Caption: Title
Contents: Content
Listing: List
Current Location: Currentpath
Side bar: Sidebar
Icons: Icon
Note: note
Login: Login
Registration: Register
Column definition: column_1of3 (the first column in three columns)
COLUMN_2OF3 (second column in three columns)
COLUMN_3OF3 (third column in three columns)

