CSS common names

　　In the front-end development, the specification uses DIV+CSS naming, which can enhance teamwork and improve development efficiency, which is beneficial to the later maintenance and optimization of the page.

1. Page structure

　　wrap: coat, wrap, used for the outermost layer.

　　wrapper: The outer layer is used to control the overall layout width on the periphery of the page.

　　box: box, container.

　　header: The header, used for the page header part.


　　nav: navigation, main navigation.

　　main: The main area, the main body of the content.

　　content/container: content, content container.

　　sidebar: The sidebar.

　　footer: Bottom, for the footer section.

2. Function block

　　left center right: left center right.

　　main-left: The main layout on the left.

　　main-right: The main layout on the right.

　　logo: The logo of the website.

　　search: Search input box.

　　loginbar: The login bar.

　　regsiter: Register the module.

　　banner: Advertisement, used for banner banners.

　　menu: menu.

　　submenu: submenu, secondary menu.

　　top: top.

　　topnav: top navigation.

　　mainnav: main navigation.

　　subnav: sub-navigation, secondary navigation.

　　leftsideBar: left navigation.

　　rightsideBar: Right navigation.

　　topbar: Top tool/menu.

　　bottom: Bottom.

　　bottombar: The bottom toolbar.

　　tool: Toolbar.

　　shop: functional area, such as shopping cart, cashier.

3. Other commonly named

　　title: column title.

　　summary: summary.

　　hot: popular hotspot information, recommended.

　　msg: prompt information.

　　news: news.

　　list: list, list of articles.

　　piclist: A list of pictures.

　　newslist: News list.

　　search-output: Search output.

　　search-results: Search results.

　　drop/dropdown: drop down.

　　dropmenu/dorpdown-content: Dropdown menu.

　　scroll: scroll.

　　homepage: Home page.

　　subpage: subpage, secondary page.

　　tag: tag.

　　tab: Tab page.

　　tips: small tips.

　　ranking: ranking.

　　vote: vote.

　　bth: button.

　　icon: icon.

　　arr/arrow: Arrow.

　　status: Status.

　　note: a note.

　　skin: skin.

　　current: current.

　　active: Active, valid.

　　download: download.

　　friendLink: Friendship link.

　　copyright: Copyright information.

　　partner: partner.

　　joinus: join us.

　　sitemap: Sitemap.

　　siteinfo: website information.

　　siteinfoLegar: Legal Notices.

　　announcement: announcement.

　　guild: Guide.

　　service: service.

　　promotion: promotion.

　　blog: blog.

　　forum: Forum.

4. Product-related naming

　　keyword: keyword.

　　products: Products.

　　products-prices: Product prices.

　　products-description: Product description.

　　products-review: Product reviews.

　　editor-review: Edit the review.

　　news-products: The latest products.

　　publisher: the producer.

　　screenshot: Thumbnail.

　　faqs: Frequently Asked Questions.

　　barnding: trademark.

　　pay: recharge.

　　reputation: reputation.

5. Commonly used file naming

　　Global style: global.css

　　Layout structure: layout.css

　　Basic common: base.css

　　Comprehensive style: style.css

　　Main: master.css

　　Module: module.css

　　Form: forms.css

　　Theme/page change Skin: themes.css

　　Font: font.css

　　Print: print.css

　　Patch: mend.css

　　private style/independent page, according to the actual situation, you can customize the naming of CSS files.

　　These commonly used file names do not need to be used in full. According to the actual situation, each page should refer to no more than 3 CSS files.

6. ID and Class naming conventions

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

　　(2) The naming rules must be based on content first and performance as a supplement. First, name it according to the content and function to be presented. If the content cannot find a suitable name, it can be named according to the performance.

　　(3) In most cases, English words are used for naming, which can increase the readability of the code, but in special cases, when no suitable words are found, pinyin names can be used, but they must be concise and clear in structure.

　　(4) The names of ID and Class should be all lowercase as much as possible. Multiple words can be linked with hyphens (-), and numbers can be used in the names, but they cannot start with numbers.

　　(5) The name can use abbreviations, but it must be a valid abbreviation, that is, others can understand it, and cannot customize the abbreviation.