HTML and CSS naming-words too literally

html+css naming rules

In a more content HTML page, you need to design many different frameworks, and then classify these different frameworks and content, give the corresponding names, so that the structure of the Web page is clearer, but also to facilitate the work. Many novice friends in the design of an HTML file, may only be based on their own ideas to give some simple name, but if blindly disorderly name, not only will let the team's partners do not understand, but also cause the label name confusion, this will make the code maintenance is very difficult, is very detrimental to management. So we should have a good naming convention when designing an entire website or a separate HTML page. In this article, we mainly explain the CSS naming conventions , which also includes the naming of HTML tags .

The name of the file must start with the English alphabet, usually named according to the classification of the content and the type of frame to be translated into English words to name, for example: Div id= "nav" (denoted as this div is a navigation bar), all the words should be in lowercase letters, names can use numbers, or underscores, for example: div= "Main_piclist" (for a list of pictures under Main content), div= "Nav_bg.jpg" (for the background of the navigation bar), and you can use an underscore to connect between names, for example: div= "Main-left" (represents the layout of the left content) all names should try to avoid the use of Chinese characters, with the fewest letters to achieve the most easily understood meaning, unless you understand, otherwise try not to abbreviate.

the naming of HTML tags/css standardized naming encyclopediapage structure naming

1. Page: Represents the entire page for the outermost layer.
2. Wrap: A outer package that wraps all the elements together for the outermost
3. Wrapper: page perimeter controls overall layout width for outermost
4. Container: A whole container for the outermost
5. Head, Header: Header area, for head
6. Nav: Navigation bar
7. Content: Contents, the most important content area of a Web site, for the middle body of a Web page
8. Main: Primary area of the site (representing the most important piece of space) for the central body content
9. Column: Column
10. Sidebar: Side bar
11. Foot, footer: page footer, footers. Site some additional information to place the area, (or named copyright) for the bottom

navigation naming

1. Nav, NavBar, navigation, Nav-wrapper: Navigation bar or navigation package, representing landscape navigation
2. Topnav: Top Navigation
3. MAINBAV: Main navigation
4. Subnav: Sub-navigation
5. Sidebar: Side navigation
6. Leftsidebar or sidebar_a: left navigation
7. Rightsidebar or sidebar_b: Right navigation
8. Title: Caption
9. Summary: Abstract/li>
10. Menu: Menus. The area contains general links and menus
11. Submenu: Sub-menu
12. Drop: Drop down
13. Dorpmenu: drop-down menu
14. Links: Link Menu

feature naming

1. Logo: Flag website logo
2. banner: Banner, banner, top banner
3. login: Login, (e.g. login form: form-login)
4. loginbar: Login /li>
5. regsiter: Register
6. Tool, toolbar: Toolbar
7. Search: Search
8. searchbar: Search bar
9. searchlnput: Search Input Box
10. Shop: Ribbon, which represents the current
11. icon: Small icons
12. Label: Trademarks
13. homepage: Home
14. subpage: Level two page face page
15. Hot: Top hotspots
16. list: A list of articles, (for example, a news list: List-news)
17. Scroll: Scrolling
18. tab: Label
19. Sitemap: Sitemap
20. MSG or message: Prompt for
21. current:
22. joinus: Join
23. Status: Status
24. btn: Button, (for example, Search button can be written as: Btn-search)
25. tips: Tips
26. Note: Comments
27. Guild: Guide
28. arr, arrow: Mark Arrows
29. service: Services
30. Breadcrum B: (That is, the page location navigation hint)
31. download: Download
32. vote: Poll
33. siteinfo: Website Information
34. PARTNER: Partners
35. Link, Friendlink: Links
36. Copyrights: Copyright Information
37. siteinfocredits: Reputation
38. Siteinfolegal: Legal information

CSS style naming

1. The alignment style is named: Left (content on the side), center (middle content), right (content on the side), and so on;
2. Color English name: Red (red), green, yellow (yellow), or border_red (red border), etc.;
3. color code naming: f00 (red), ff0 (yellow), F90 (orange), etc.;
4. Text size naming: font12px (font 12 pixels), font16px (font 16 pixels), etc.;
5. Page Line name: line_x (horizontal), line_y (vertical line) or line_red (red), Line_black (Black)
6. Image icon Name: pic_1.jpg, pic_2.jpg or Ico_1.gif, ico_2.gif
7. Page ad naming: ad_01, ad_02
8. Background frame naming: NAV_BG (the position of the background picture representing the navigation bar), TOOL_BG (representing the background image position of the toolbar)

CSS style sheet naming

1. INDEX.CSS: Create a style for a separate home page
2. Head.css: Head style, multiple page head design style is used simultaneously.
3. Base.css: Common style.
4. STYLE.CSS: The style file used by the standalone page.
5. GLOBAL.CSS: Page style basics, global common styles, pages must contain.
6. LAYOUT.CSS: Layout, layout style, common types of use, generally used in the home page and product class pages
7. MODULE.CSS: Modules, for product class pages, can also be used in conjunction with other styles.
8. MASTER.CSS: The main style sheet
9. COLUMNS.CSS: Column Style
10. Themes.css: Body Style
11. Forms.css: Form Style
12. MEND.CSS: Patches, based on the above style of privatization patching.

HTML and CSS naming-words too literally