CSS Naming conventions

CSS Naming conventions page 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: Mark logo of website logo
2. Banner: Banner, banner, top banner
3. Login: login, (e.g. login form: form-login)
4. Loginbar: Login Bar
5. Regsiter: Register
6. Tools, toolbar: tool strips
7. Search: Searching
8. Searchbar: Search Bar
9. Searchlnput: Search Input Box
10. Shop: The Ribbon, which represents the current
11. Icon: Small icon
12. Label: Trademark
13. Homepage: Home
14. Subpage: Level two page face page
15. Hot: Hotspots
16. List: article lists, (e.g. News list: List-news)
17. Scroll: Scrolling
18. Tab: Tab
19. Sitemap: Site Map
20. MSG or message: Prompt information
21. Current: the
22. Joinus: Join
23. Status: State
24. BTN: Button, (for example, Search button can be written as: Btn-search)
25. Tips: Tips
26. Note: note
27. Guild: Guide
28. Arr, arrow: Marker arrows
29. Service: Services
30. Breadcrumb: (That is, where the page is located navigation tips)
31. Download: Download
32. Vote: Voting
33. Siteinfo: Website Information
34. PARTNER: Partners
35. Link, Friendlink: links
36. Copyrights: Copyright Information
37. Siteinfocredits: Credibility
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.

CSS Naming conventions