Introduction to HTML+CSS naming rules

HTML+CSS Naming Rules

In an HTML page with a lot of content, it is necessary to design many different frames, and then classify these different frames and content, and give corresponding name, thus making the structure of the web page clearer and making work easier. When many novice friends design an HTML file, they may only give some simple names based on their own ideas. However, if they blindly give random names, it will not only make it difficult for team members to understand, but also lead to confusing label names. It will make code maintenance very difficult and very unfavorable for management. Therefore, when designing the entire website or a separate HTML page, we should have good naming rules. In this article, we mainly explain CSS naming rules, which also includes naming HTML tags.

The file name must start with an English letter. The usual naming rule is to translate it into English words and name them according to the classification of the content and the type of the frame. For example: div id="nav" (meaning that this div is a navigation bar ), all words should be in lowercase letters, and numbers or underlines can be used in the name, for example: div="main_piclist" (representing the picture list under the main content), div="nav_bg.jpg" (representing the background image of the navigation bar) , you can also use dashes to connect names, for example: div="main-left" (indicating the layout of the content on the left) All names should try to avoid using Chinese characters, and use the fewest letters to achieve the easiest to understand Unless the meaning is easily understood at a glance, try not to abbreviate it.

HTML tag naming/CSS standardized naming collection

Page structure naming

1. ##page: Represents the entire page and is used for the outermost layer.

2. wrap: coat, a peripheral package that wraps all elements together, used for the outermost layer

3. wrapper: page peripheral control overall Layout width, used for the outermost layer

4. container: an overall container, used for the outermost layer

5. head, header: header area , used for the header

6. nav: navigation bar

7. content: content, the most important content area in the website, used for the middle body of the web page

8. main: The main area in the website (indicating the most important position), used for the central main content

9. column: Column

10. sidebar: sidebar

11. foot, footer: footer, footer. Some additional information placement areas on the website, (or named copyright) are used at the bottom

navigation naming

##nav, navbar, navigation, nav-wrapper: navigation bar or navigation package, representing horizontal navigation
topnav: top navigation
mainbav: main navigation
subnav：Sub navigation
sidebar：Side navigation

5. ##leftsidebar or sidebar_a：Left navigation

6. rightsidebar or sidebar_b: right navigation

7. title: title

8. summary: summary/li>

9. menu: Menu. Area contains general links and menus

10. submenu: submenu

11. drop: dropdown

12. dorpmenu: drop-down menu

13. links: link menu
Function naming

1. banner: slogan, advertising banner, top advertising banner

2. login: login, (such as login form ：form-login）

3. loginbar：Login bar

4. regsiter：Registration

5. tool, toolbar: Toolbar

6. search: Search

7. searchbar: Search bar

8. searchlnput: Search Input box

9. shop: ribbon, indicating the current

10. icon: small icon

11. ## label: Trademark

12. homepage: Homepage

13. subpage: Secondary page subpage

14. hot : Hot spots

15. list: Article list, (for example, news list: list-news)

16. scroll: Scroll

17. tab: tag

18. sitemap: website map

19. ##msg or message: prompt message

20. current: current

21. joinus: join

22. status: status

23. btn: Button, (for example, the search button can be written as: btn-search)

24. tips: Tips

25. note: Note

26. guild: guide

27. arr, arrow: mark arrow

28. service: service

29. breadcrumb: (i.e. the navigation prompt of the page location)

30. download：Download

31. vote：Vote

32. siteinfo: website information

33. partner: partner

34. link, friendlink: friend link

35. copyright: Copyright information

36. siteinfoCredits: Credibility

37. siteinfoLegal: Legal information

CSS style naming

1. Alignment style naming: left (left content), center (middle content), right (right content) ), etc.;

2. English naming of colors: red (red), green (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 naming: line_x (horizontal line), line_y (vertical line) or line_red (red line), line_black (black line)

6. Picture icon naming: pic_1.jpg, pic_2.jpg or ico_1.gif, ico_2.gif

7. ##Page advertising naming: ad_01, ad_02

8. Background frame naming: nav_bg (represents the position of the background image of the navigation bar), tool_bg (represents the position of the background image of the toolbar)

CSS style sheet naming

1. index.css: Create a separate style for the homepage

2. head.css: Head style, multiple page head design Used when the styles are the same.

3. base.css: shared style.

4. style.css: Style file used by independent pages.

5. global.css: page style base, global public style, must be included in the page.

6. layout.css: layout, layout style, used when there are many common types, generally used in homepage pages and product pages

7. module.css: module, used for product pages, and can also be used with other styles.

8. master.css: Main style sheet

9. columns.css: Column style

10. themes.css: Body style

11. forms.css: Form style

12. mend.css: Patch, privatized patch based on the above style .

The above is the detailed content of Introduction to HTML+CSS naming rules. For more information, please follow other related articles on the PHP Chinese website!