Web Design Naming conventions

I. Website design and basic framework structure:

Web Design Naming conventions
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. Photoshop Layer structure Specification:
Photoshop layer naming follows the tree structure, where an element consists of layers larger than 3 layers to form groups, and all layers try to avoid using default naming (layer + number).
Layer naming structure

Four. Common naming summaries:
Sites: Site
Home: Homepage
Current Location: Currentpath
Secondary page/Sub-page: subpage
Layouts: Layout
Searches: Search
Page Head: Head/header
Login Strip: Loginbar
Logo: Logo
Sidebar: Side/sidebar
AD strip: Banner
Navigation: Nav
Main navigation: Mainnav
Top Navigation: Topnav
Sub-navigation: Subnav
Current Location Navigation: crumb
Menus: Menu
Sub-menu: submenu
Menu Contents: menucontent
Sub-menu Contents: submenucontent
Drop Down: Drop
Drop-down menu: Dropmenu
Tool bar: Tool/toolbar
Forms: Form
Column: Column
Arrow: Arr/arrow
Searches: Search
Search button: Btn-search
Scroll bar: Scroll
Theme/Appearance: Theme
Page body: Main
Page Middle: mainbody
Contents: Content
Tabs page: Tab
Article List: List
Tag content: tagcontent
Current tag: Tagcurrent/currenttag
Hint Message: MSG
Corner/Fillet: Cor/corner
Special: Spec
Resource: Source
Join: Joinus
Tip: Tips
Column Title: Title
Link: Links
Footer: Footer
Services: Service
Guide: Guild
Hotspot: Hot
Press: News
Download: Download
Registration: Regsiter
State: Status
Button: BTN
Note: note
Vote: Vote
PARTNER: Partner
Links: Friendlink
About Us: AboutUs
Submitted by: Submit
Search box: SearchBox
Text Box: TextBox
Page bottom: Foot/footer
Copyrights: Copyright
Site Map: Sitemap
Column definition: column_1of3 (the first column in three columns)
COLUMN_2OF3 (second column in three columns)
COLUMN_3OF3 (third column in three columns)

category naming：
name of the ID:
(1) Page structure
Container: Container Header: Header content: Content/container
Page body: Main Page end: Footer Navigation: Nav
Sidebar: Sidebar column: Column page perimeter control overall layout width: Wrapper
Middle: Left Right center
(2) Navigation
Navigation: Nav Main navigation: Mainbav sub-nav: Subnav
Top navigation: Topnav side navigation: Sidebar left navigation: Leftsidebar
Right navigation: Rightsidebar: Menu submenu: Submenu
Title: Title Abstract: summary
(3) function
Logo: Logo ads: Banner login: Login Login: Loginbar
Registration: Regsiter Search: Searching Ribbon: Shop
Title: Title Join: Joinus Status: State button: BTN
Scrolling: Scroll tab: Tab Article list: Listing tip information: Msg
Present: Current Tips: Tips icon: Icon Note: note
Guide: Guild Services: Service hotspot: Hot NEWS: News
Download: Download vote: Vote partner: Partner
Links: Link Copyrights: Copyright

name of class:
(1) Color: Use the name of the color or the 16 code, as shown in
. red {color:red;}
. F60 {color: #f60;}
. ff8600 {color: #ff8600;}
(2) Font size, directly using ' font+ font size ' as the name, as
. font12px {font-size:12px;}
. font9pt {font-size:9pt;}
(3) Alignment style, using the English name of the alignment target, such as
. left {float:left;}
. bottom {float:bottom;}
(4) title bar style, using the ' category + function ' way to name, such as
. Barnews {}
. barproduct {}
Precautions :
1. Lowercase;
2. Try to use English;
3. Do not add the middle bar and underline;
4. Try not to abbreviate unless you see the words clearly.
The main MASTER.CSS module MODULE.CSS basic Common Base.css
Layout, layout layout.css theme themes.css column Columns.css
Text font.css form forms.css patch mend.css print print.css
Statistics: Count


The above structure can be used in combination, for example: left column heading lefttitle; bottom navigation Footernav specification does not mean that everyone should name the CSS in a way, we can customize the naming rules according to our own needs, just remember the named rules, It can be based on the characteristics of the site itself to create a style of their own naming method.
First, the current web page designers use more is based on the software open the name of the variable naming method. For a set of classes that define the style of a font, we can prefix it with the header letter F, foot, such as:
F-blue: Indicates a blue font style
F-blod: indicates bold font style
For the real-world style of news in web pages such as news channels, you can use n as a prefix for style design, such as:
N-title: News Headlines
N-list: News List


Five, CSS file and style naming
1. css file naming specification
Global style: GLOBAL.CSS;
Frame layout: layout.css;
Font style: Font.css;
Link style: link.css;
Print style: print.css;
2. CSS style naming specification
I suggest: With letters, _ Number of workers,-numbers, numbers, must start with a letter, not a pure number. In order to develop a convenient style name management, please use a meaningful word or abbreviated combination to name, so that colleagues can see that the type is probably which piece, so that the time to find the style, such as:
Head style with header, head to the left, can be used Header_left or header_l, and if the column structure can be so--box _1of3 (the first column in three columns), BOX_2OF3 (the second column in three columns), Box _3of3 (three columns in the third column), Other I do not have an example, everyone according to the above rules to name the good.
The following lists some commonly used name words convenient for everyone to use: (after everyone in the work process slowly put their accumulated words are shared out, then everyone's life will be more unified, there will be no more words of the case.) ）

Web Design Naming conventions