Common naming rules for class and ID of CSS

Time:2021-7-22

Page public name:

  • #Wrapper — the width of the overall layout is controlled by the periphery of the page
  • #Container or # content — container, used for 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 — page body
  • #Tag — tag
  • #MSG, message — prompt message
  • #Tips tips
  • #Vote — vote
  • #FriendLink
  • #Title
  • #Summary
  • #Loginbar — login bar
  • #SearchInput — search input box
  • #Hot — hot spots
  • #Search — Search
  • #search_ Output — the search output is similar to the search result
  • #SearchBar — search bar
  • #search_ Results — search results
  • #Copyright information
  • #Branding — trademark
  • #Logo — website logo
  • #Siteinfo — website information
  • #Siteinfo legal — legal reputation
  • #Site infocredits — reputation
  • #Join us
  • #Partner — partner
  • #Service — Service
  • #Regsiter — register
  • Arrow / arrow — arrow
  • #Guide
  • #Sitemap — website map
  • #List — List
  • #Home page
  • #Subpage — secondary face subpage
  • #Tool, toolbar — toolbar
  • #Drop — drop down
  • #Dorpmenudrop down menu
  • #Status
  • #Scroll — scroll
  • . tab — tab
  • . left,. Right,. Center — center, left, right
  • . News — news
  • . download — Download
  • . Banner — banner (top banner)
  • E-commerce related:
  • . products — products
  • .products_ Prices — product price
  • .products_ Description — Product Description
  • .products_ Review — Product Review
  • .editor_ Review — editorial review
  • .news_ Release — the latest product
  • . publisher — producer
  • . screenshot — thumbnail
  • . FAQs — frequently asked questions
  • . keyword — Keyword
  • . blog — blog
  • . Forum — Forum

Name of foundation:

  • Wrap for outermost layer
  • Head — for head
  • Main — used for main content (middle)
  • Left main left — left layout
  • Main right — right layout
  • NAV — web menu nav
  • Content — used for the middle main body of a web page
  • Bottom footer — for bottom

CSS file name:

  • Master.css, style.css — main
  • Module.css — module
  • Base.css — basic sharing
  • Layout.css — layout, layout
  • Themes.css — Theme
  • Columns.css — columns
  • Font.css — text, font
  • Forms.css — forms
  • Mend.css — patch
  • Print.css — Print

Naming suggestions:

Whether we use the “.” (lowercase period) selector or the “# (pound sign) selector, we all follow that the main, important, special, outermost box is named with the” # (pound sign) selector, and the others are named with the “.” (lowercase period). At the same time, we consider the repeated use of the named CSS selector in HTML.

This article about CSS class and ID commonly used naming rules is introduced here. For more information about CSS class and ID naming rules, please search previous articles of developer or continue to browse the following articles. I hope you can support developer more in the future!

Recommended Today

I want to discuss canvas 2D and webgl with you

background This article is included inData visualization and graphicsspecial column As mentioned above, I wrote my first column and realized a simple program for the cognition of graphics and visualization. It was originally intended that the follow-up sequence has focused on the algorithm and rendering direction. However, based on the students’ feedback on obscure problems […]