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

Rocketmq installation and configuration process

Official website Official website:http://rocketmq.apache.org Download the source package:https://www.apache.org/dyn/closer.cgi?path=rocketmq/4.8.0/rocketmq-all-4.8.0-source-release.zip Github:https://github.com/apache/rocketmq Linux+JDK1.8 Server configuration Configure the JDK environment in the server and upload the compressed package to / usr / local for decompression tar -zxvf jdk-8u231-linux-x64.tar.gz /usr/local Configure environment variables vim /etc/profile #Insert content export JAVA_HOME=/usr/local/jdk1.8.0_231 export JRE_HOME=$JAVA_HOME/jre export CLASSPATH=.:$JAVA_HOME/lib:$JRE_HOME/lib export PATH=$JAVA_HOME/bin:$PATH #Immediate effect source /etc/profile Enter […]