Sorting of front-end development code and development code naming

Sorting of front-end development code and development code naming
Div + CSS naming convention 1. Form

Header: header

Content: content/container

End: footer

Navigation: nav

Sidebar: sidebar

Column: column

Overall Layout width of the page peripheral control: wrapper

Left right center

Logon entry: loginbar

Logo: logo

Advertisement: banner

Page subject: main

Hotspot: hot

News: news

Download: download

Subnavigation: subnav

Menu: menu

Sub menu: submenu

Search: search

Link: friendlink

Footer: footer

Copyright: copyright

Scroll: scroll

Content: content

Tab: tab

Article list: list

Message: msg

Tips: tips

Topic title: title

Join: joinus

Guide: guild

Service: service

Registration: regsiter

Status: status

Vote: vote

Partner: partner

Ii. css comments

/* Footer */content area/* End Footer */

Html annotation Syntax: <! -- Header -->

Iii. id name

1. Page Structure　　

Container: container

Header: header

Content: content/container

Page subject: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

Overall Layout width of the page peripheral control: wrapper

Left right center

2. Navigation　

Navigation: nav

Main navigation: mainnav

Subnavigation: subnav

Top navigation: topnav

Side navigation: sidebar

Left Navigation: leftsidebar

Right navigation: rightsidebar

Menu: menu

Sub menu: submenu

Title: title

Abstract: summary

3. Functions

Logo: logo

Advertisement: banner

Login: login

Logon entry: loginbar

Registration: regsiter

Search: search

Functional Area: shop

Title: title

Join: joinus

Status: status

Button: btn

Scroll: scroll

Tab: tab

Article list: list

Message: msg

Current: current

Tips: tips

Icon: icon

Note: note

Guide: guild

Service: service

Hotspot: hot

News: news

Download: download

Vote: vote

Partner: partner

Link

Copyright: copyright

Iv. class naming

1.Color

Use the color name or hexadecimal code, such as. red {color: red ;};. f60 {color: # f60 ;};. ff8600 {color: # ff8600 ;}

2. font size

Directly use 'font + font size' as the name, such as. font12px {font-size: 12px ;};. font9pt {font-size: 9pt ;}

3. Align the style

Use the English name of the alignment target, such as. left {float: left ;};. bottom {float: bottom ;}

4. Title bar style

Use the 'category + function' method, such as. barnews {};. barproduct {}

Note:

1. All are in lower case;

2. Try to use English;

3. Do not add hyphens or underscores;

4. Try not to be abbreviated. Except for words that can be understood without looking at them, the main ones are:

Parent Forum: master.css

Module: module.css

Basic sharing: base.css

Layout, layout: layout.css

Themes.css

Column: columns.css

Text: font.css

Form: forms.css

Patch: mend.css

Print: print.css