HTML and CSS naming-words too literally

Source: Internet
Author: User
Tags naming convention

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.