Common naming rules for CSS classes and ids

Public name of the page:

• #wrapper - - The outer edge of the page controls the overall layout width
• #container or #content - - container, used for the outermost layer
• #layout - - Layout
• #head, #header - - Header section
• #foot, #footer - - footer section
• #nav - - Main navigation
• #subnav - - Secondary navigation
• #menu - - Menu
• #submenu - - Submenu
• #sidebar - - Sidebar
• #sidebar_a,#sidebar_b - - Left or right sidebar
• #main - - The main body of the page
• #tag - - Tags
• #msg, #message - - Prompt message
• #tips - - Tips
• #vote - - Vote
• #friendlink - - Friendship Links
• #title - - Title
• #summary - - Summary
• #loginbar - - Login bar
• #searchInput - - Search input box
• #hot - - Hot Hot Spots
• #search - - Search
• #search_output - - Search output is similar to search results
• #searchBar - - Search bar
• #search_results - - Search results
• #copyright - - Copyright information
• #branding - - Branding
• #logo - - Website logo
• #siteinfo - - Site information
• #siteinfoLegal - - Legal Notice
• #siteinfoCredits - - Credits
• #joinus - Join us
• #partner - - Partner
• #service - - Service
• #regsiter - - Register
• arr/arrow - - Arrow
• #guild - - Guide
• #sitemap - - Sitemap
• #list - - List
• #homeepage - - Home
• #subpage - - Second level subpage
• #tool，#toolbar - - Toolbar
• #drop - - Drop down
• #dorpmenu - - Drop-down menu
• #status - - Status
• #scroll - - Scroll
• .tab - - Tabs
• .left,.right,.center - - Center, left, right
• .news - - News
• .download - - Download
• .banner - - Advertisement banner (top banner)
• E-commerce related:
• .products - - Products
• .products_prices - Product prices
• .products_description - Product description
• .products_review - - Product reviews
• .editor_review - - Editor review
• .news_release - - Latest releases
• .publisher - - Producer
• .screenshot - - thumbnail
• .faqs - Frequently Asked Questions
• .keyword - - Keyword
• .blog - - Blog
• .forum - - Forum

Basic naming:

• Wrap - - For the outermost layer
• Header - - For header
• Main content - - used for the main content (middle)
• main-left - - Left layout
• Main-right - - Right layout
• Navigation bar nav - - Web page menu navigation bar
• Content - - used for the main body of the web page
• footer - - used for the bottom

CSS file naming:

• master.css, style.css - - Main
• module.css - - Module
• base.css - - Basic common
• layout.css - - Layout, layout
• themes.css - - Themes
• columns.css - - Columns
• font.css - - Text, fonts
• forms.css - - Forms
• mend.css - - Patch
• print.css - - Print

Naming suggestions:

Whether it is named after the "." (lowercase period) selector or the "#" (pound sign) selector, we finally follow that the main, important, special, and outermost boxes are named after the "#" (pound sign) selector, and the others are named after the "." (lowercase period), while considering the named CSS selectors to be reused in HTML.

This concludes this article about the commonly used naming rules for CSS classes and ids. For more information on CSS class and id naming rules, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!