Website naming rules: CSS specifications for easy communication

Good naming rules can contribute to the Cooperative Development of teams, and play a crucial role in both project development and product maintenance. It should be said that naming conventions are a convention and a bridge of good communication between programmers.

 

Naming rules:

Logon entry: loginbar
Logo: logo
Sidebar: sidebar
Advertisement: banner
Navigation: nav
Subnavigation: subnav
Menu: Menu
Sub menu: submenu
Search: Search
Scroll: Scroll
Page subject: Main
Content: Content
Tab: Tab
Article list: List
Message: msg
TIPS: Tips
Topic title: Title
Link: friendlink
Footer: footer
Join: joinus
Guide: Guild
Service: Service
Hotspot: hot
News: News
Download: Download
Registration: regsiter
Status: Status
Button: BTN
Vote: Vote
Partner: Partner
Copyright: Copyright

1. cssid name
Coat: Wrap
Main navigation: mainnav
Subnavigation: subnav
Footer: footer
Entire page: Content
Header: Header
Footer: footer
Trademark: Label
Title: Title
Main navigation: mainnav (globalnav)
Top navigation: topnav
Side navigation: sidebar
Left Navigation: leftsidebar
Right navigation: rightsidebar
Flag: logo
Banner
Menu content 1: menu1content
Menu capacity: menucontainer
Sub menu: submenu
Navigation icon: sidebaricon
Note: Note
Breadcrumb)
Container: Container
Content: Content
Search: Search
Login: Login
Functional Area: Shop (such as shopping cart and cashier)
Current

2. Style File Name
Main: master.css
Layout: layout.css
Column: columns.css
Text: font.css
Print Style: print.css
Themes.css

Note: The names are all class and need to be extended. The names are defined with the suffix "_" (underline) in the current name.
I used to call the list page as list, the news list as newslist, and the picture list as piclist,
The content page is view,
/**/
Overall framework: # wrapper
Within the framework: # inwrapper
//////////////////////////////////////// //////////////////////////////////////// /////////////////////////
Top and banner:. Top
Top and banner:. intop
Logo:. Logo
BANNER:. BANNER
Navigation:. Menu
In the navigation bar:. inmenu
. Menuul
. Menuul Li
. Menuul Li
Drop-down menu:. inmenu_xiala
. Inmenu_xialaul
. Inmenu_xialaul Li
. Inmenu_xialaul Li
//////////////////////////////////////// //////////////////////////////////////// ///////////////////////////
Body content:. mainwrapper
Body content:. inmainwrapper
Left-side blocking:. sideleft
Left side:. insideleft
Right column:. sideright
Right side:. insideright
Center:. sidecenter
Insidecenter
//////////////////////////////////////// //////////////////////////////////////// /////////////////////////////
Bottom:. Foot
Bottom:. infoot
//////////////////////////////////////// //////////////////////////////////////// ////////////////////////////
/* Other Names */
Search:. Search
In-Search:. insearch
Search Results:. searchselect
Search button:. serachbuttom
Input text box:. Input
. Select

/* Table style */
Overall table framework:. ListBox
Table width:. ListBox-table
Text style of the table header:. ListBox-Header
Text style of the table body:. ListBox-entry
/* General */
GENERAL:. GM/* this is a bit depressing. The English is too bad ...*/
General purpose:. ingm
General left floating:. gmfl (GM float left)
General right float:. gmfr (GM float right)
/* General image style */
Generic image style:. img
/* Clear floating */
Clear all float:. Clear
Clear floating on the left:. clearleft
Clear floating on the right:. clearright
/* Text style */
Text:. Font
/* News list */
News list:. fontnews
/* Total Font Style of the view page */
View page Font:. fontview

Standard: Label
Title: Title
Main navigation: mainbav (globalnav)
Top navigation: topnav
Side navigation: sidebar
Left Navigation: leftsidebar
Right navigation: rightsidebar
Flag: logo
Banner
Menu content 1: menu1 content
Menu capacity: menu container
Sub menu: submenu
Navigation icon: sidebaricon
Note: Note
Breadcrumb)
Container: Container
Content: Content
Search: Search
Login: Login
Functional Area: Shop (such as shopping cart and cashier)
Current
Header: masthead
Summary, Summary or general
Float image photoleft on the left
Float image photoright on the right
Title
Entrybottom at the bottom of the Entry
More extended or. More
Container background containerbg
Service
Service link servicelink
Line
Text text
Rightside on the right
Copyright
News
Book wrapper
Introduction intro-part1
Column
Path pathways
Section
Module
Subnav
2. In addition, you can use the following annotations when editing a style sheet:

<-- Footer -->
Content Area
<-- End footer -->

3. Style File Name

Main master.css
Layout.css
Columns.css
Text font.css
Print Style print.css
Themes.css

4. note in the style sheet
Instance 1
/* Global ---------------------------*/
/* Links ---------------------------*/
/* FORMS ---------------------------*/
/* IDs ---------------------------*/
/* Header ---------------------------*/
/* Column 1 ---------------------------*/
/* Column 2 ---------------------------*/
/* Classes ---------------------------*/

Instance 2

Html

Instance 3 (Netease)

CSS
# Urslogin
# Logonav
# Column
# Content1
# Bnav
# Copyright
# Urslogin
# Logonav
# Searcharea
# Channelarea
# Hotnews
# Newscenter
. Keyword
# Mallarea
# City
# Aboutus

........................
Common naming

Including wrapper and container
The header or its abbreviation is HD.
Footer or ft
Navigation nav
Your location: breadcrumbs
Sub_nav
Sidebar or side-Column
Module