css naming rules website design and basic framework structure

1. Website design and basic framework structure:

1. Container
"container" is the part that wraps all the elements in the page together. This part can also be named: "wrapper", "wrap", " page".
2. Header
"header" is the head area of ​​the website page. Generally speaking, it contains the website's logo and some other elements. This part can also be named: "page-header" (or pageHeader).
3. Navbar
"navbar" is equivalent to a horizontal navigation bar and is the most typical web page element. This part can also be named: "nav", "navigation", "nav-wrapper".
4. Menu
The "Menu" area contains general links and menus. This part can also be named: "subNav ", "links ","sidebar-main".
5. Main
"Main" is the main area of ​​the website, if it is a blog it will contain the log. This section can also be named: “content“, “main-content” (or “mainContent”).
6. Sidebar
The "Sidebar" part can contain secondary content of the website, such as a list of recently updated content, an introduction to the website or advertising elements, etc... This part can also be named: "subNav ", "side-panel", " secondary-content".
7. Footer
"Footer" contains some additional information about the website. This part can also be named: "copyright".

2. Points to note:

1. Try to name the element with its own function or "intention" to achieve semantics. Do not use superficial naming.
Such as: red/left/big, etc.

2. Combination naming rules:
[Element type]-[Element function/content]
For example: search button: btn-search
Login form: form-login
News list: list-news

3. Involving interaction Behavioral element naming:
Elements involving interactive behaviors usually have different styles such as normal, hover, click, and visited. Naming can refer to the following rules:
Mouseover::hover Click: click Visited: visited
For example :Search button: btn-search, btn-search-hover, btn-search-visited

3. Commonly used naming summary:

Header: header
Login bar: loginbar
Logo: logo
Sidebar: sidebar
Advertisement banner:banner
navigation:nav
sub-navigation:subNav
menu:menu
submenu:subMenu
drop-down menu:dropMenu
toolbar: toolbar
form:form
column:column
arrow:arrow
search:search
Search button: btn-search
Scroll bar: scroll
Content: content
Tab page: tab
Article list: list
Prompt message: msg
Tips: tips
Column title: title
Link: links
Footer: footer
Service:service
Hotspot:hot
News:news
Download:download
Register:regsiter
Status:status
Button:btn
Vote:vote
Partner:partner
Copyright:copyright
Sitemap: sitemap

Naming rules for other references
Header: header
Login bar: loginbar
Logo: logo
Sidebar: sidebar
Advertising: banner
Navigation: nav
Sub-navigation: subnav
Menu: menu
Sub-menu: submenu
Search: search
Scroll: scroll
Page body: main
Content: content
Tab page: tab
Article list: list
Prompt message: msg
Tips: tips
Column title: title
Join: joinus
Guide: guild
Service: service
Hotspot: hot
News: news
Download: download
Register: regsiter
Status: status
Button: btn
Vote: vote
Partner: partner
Friendly link: friendlink
Footer: footer
Copyright: copyright

Naming of CSS ID
Jacket: ​ wrap
Main navigation: ​ mainnav
Sub-navigation: ​ subnav
Footer: ​ footer
Entire page: ​ content
Header: ​ header
Footer: ​ footer
Trademark: ​ label
Title: ​ 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
submenu: submenu
Side navigation icon: sidebarIcon
Note: note
Breadcrumb: breadcrumb (i.e. navigation prompt for the location of the page)
Container: container
Content: content
Search: Search
Login: Login
Ribbon area: shop (such as shopping cart, checkout) Taiwan)
currentcurrent

In addition, the comments available when editing the style sheet can be written like this:

Content area

Style file naming
Main master.css
Layout, layout.css
Columns.css
Text font.css
Print style print.css
Themes.css

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

Container: container/box
head: header
main navigation: mainNav
sub-navigation: subNav
top navigation: topNav
website logo: logo
big ad: banner
middle of page: mainBody
bottom: footer
menu: menu
menu content: menuContent
Submenu: subMenu
SubmenuContent: subMenuContent
Search: search
Search keyword: keyword
Search range: range
Tag text: tagTitle
Tag content: tagContent
Current tag: tagCurrent/currentTag
Title: title
Content :content
list:list
current position:currentPath
sidebar:sidebar
icon:icon
note:note
login:login
register:register
column definition: column_1of3 (the first of three columns)
column_2of3 ( The second column of three)
column_3of3 (The third column of three)