Common names of CSS-time on the other side

Common CSS naming-when the other side is in front-end development, the standard use of DIV + CSS naming can enhance teamwork to improve development efficiency and facilitate the maintenance and optimization of pages in the future.

1. Page Structure

Wrap: Coat, package, used for the outermost layer.

Wrapper: Coat Used to control the overall layout width at the perimeter of the page.

Box: box, container.

Header: header, used for the page header.

Nav: navigation, main navigation.

Main: main area, content subject.

Content/container: content, content container.

Sidebar: sidebar.

Footer: Bottom, used for footer.

2. functional area blocks

Left center right: left middle right.

Main-left: main layout on the left.

Main-right: main layout on the right.

Logo: the LOGO of the website.

Search: search input box.

Loginbar: logon entry.

Regsiter: registration module.

Banner: advertisement, used for banners.

Menu: menu.

Submenu: submenu, level-2 menu.

Top: top.

Topnav: top navigation.

Mainnav: main navigation.

Subnav: subnavigation, secondary navigation.

LeftsideBar: left navigation.

RightsideBar: Right navigation.

Topbar: Top tool/menu.

Bottom: bottom.

Bottombar: tool bar at the bottom.

Tool: tool bar.

Shop: functional area, such as shopping cart and cashier.

3. Other common names

Title: topic title.

Summary: summary.

Hot: popular Hotspot information, recommended.

Msg: the prompt message.

News: news.

List: list, article list.

Piclist: image list.

Newslist: News list.

Search-output: search output.

Search-results: search result.

Drop/dropdown: drop-down.

Dropmenu/dorpdown-content: drop-down menu.

Scroll: scroll.

Homepage: Home Page.

Subpage: subpage, level 2 page.

Tag: tag.

Tab: tab.

Tips: tips.

Ranking: ranking.

Vote: vote.

Bth: button.

Icon: icon.

Arr/arrow: arrow.

Status: status.

Note: comment.

Skin: skin.

Current: current.

Active: active and valid.

Download: download.

FriendLink: Friendship link.

Copyright: copyright information.

Partner: partner.

Joinus: Join us.

Sitemap: A website map.

Siteinfo: website information.

SiteinfoLegar: Legal disclaimer.

Announcement: announcement.

Guild: guide.

Service: service.

Promotion: promotion.

Blog: blog.

Forum: forum.

4. Product naming

Keyword: keyword.

Products: product.

Products-prices: product price.

Products-description: product description.

Products-review: Product comment.

Editor-review: Edit comments.

News-products: the latest product.

Publisher: producer.

Screenshot: thumbnail.

Faqs: FAQ.

Barnding: trademark.

Pay: recharge.

Reputation: credit.

5. Common File naming

Global style: global.css

Layout Structure: layout.css

Basic sharing: base.css

Comprehensive style: style.css

Main: master.css

Module: module.css

Form: forms.css

Themes.css

Font.css

Print: print.css

Patch: mend.css

Private style/independent page. You can customize the CSS file name based on the actual situation.

The names of these commonly used files do not need to be fully used. Based on the actual situation, each page references no more than three CSS files.

6. ID and Class naming rules

(1) The main, important, special, and outermost boxes are named by the ID attribute, while others are named by the class attribute.

(2) Naming rules should take content first, supplemented by performance. First, name the content and functions to be presented. If the content cannot be properly named, you can name the content based on the presentation.

(3) In most cases, naming is based on English words, which increases the readability of the Code. However, in special cases, you can use Pinyin to name a proper word, but it must be concise and clear in structure.

(4) Use lowercase letters for the names of IDs and classes. You can use hyphens (-) for multiple words. You can use numbers but cannot start with numbers.

(5) The name can be abbreviated, but must be valid. That is, the name can be understood by others and cannot be customized.