Complete list of div+css naming conventions

1. Description of naming rules: - TOP

1), all names should be lowercase
2), the value of the attribute must be enclosed in double quotes (""), and must be It must have a value such as class="divcss5", id="divcss5"
3), each tag must have a beginning and an end, and must have the correct level, and the layout must be regular and neat
4), empty elements There must be an ending tag or "/" after the beginning tag
5), the performance and structure are completely separated, and the code does not involve any performance elements, such as style, font, bgColor, border, etc.
6 ),

to

should be defined from large to small to reflect the structure of the document and facilitate search engine queries.
7), add a unique structure tag id to each table and form
8), add alt tags to pictures
9), try to use English naming principles
10), Try not to abbreviate unless it is a word that is easy to understand at a glance
DIVCSS5 introduces common CSS naming and DIV CSS naming methods.
2. CSS style naming for important parts of the outer layer of the web page: - TOP

Coat wrap ------------------used for the outermost layer
Header -------------Used for the head
Main contentmain------------Used for the main content (middle part)
Left main-left -------------Left layout
Right main-right ----------Right layout
Navigation bar nav ------------------Web page menu navigation bar
Content content ---------------Used for the middle body of the web page
Bottom footer ------------------used for bottom
3. DIV+CSS naming reference table: - TOP

The following are CSS style naming and CSS files Naming reference table, DIV CSS naming collection:

##.left .right .centerLeft, center, right##.news.download.bannerElectronic trade related.products.products_prices.products_description.products_review.editor_review.news_release.publisher.screenshot##.faqsFAQ.keywordKeyword.blogblog.forumforum

CSS style naming	Description
Web page public naming
#wrapper	Page peripheral control overall layout width
#container or #content	container, Used for the outermost
#layout	layout
#head, #header	page Header part
#foot, #footer	Footer part
#nav	Main navigation
#subnav	Secondary navigation
#menu	Menu
#submenu	Submenu
#sideBar	sidebar
#sidebar_a, #sidebar_b	Left or right column
#main	Main page
#tag	tag
msg #message	tips
tips	Tips
#vote	vote
friendlink	Friendly connection
#title	Title
#summary	Summary
#loginbar	Login bar
#searchInput	Search input box
#hot	Hotspots
#search	Search
#search_output	Search output Similar to search results
#searchBar	Search bar
search_results	Search results
#copyright	Copyright information
#branding	trademark
#logo	Website LOGO
#siteinfo	Website information
siteinfoLegal	Legal Statement
#siteinfoCredits	Credibility
#joinus	Join We
#partner	Partner
#service	Service
#regsiter	Registration
arr/arrow	arrow
# guild	Guide
sitemap	网站MAP
#list	List
#homepage	Homepage
#subpage	Secondary page subpage
#tool, #toolbar	Toolbar
#drop	drop-down
#dorpmenu	Drop-down menu
#status	Status
#scroll	Scroll
.tab	Tab page
news
Download
Advertising banner (top advertising banner)
Products
Product prices
Product Description
Product Review
Editor Comment
Latest products
Manufacturer
Thumbnail

##font.cssText, fontforms.cssFormmend.cssPatchprint.cssPrint

CSS file naming	Description
master.css, style.css	Main
module.css	Module
base.css	Basically shared
layout.css	Layout, layout
themes.css	Theme
columns.css	Column

CSS style naming description
Web page public naming
#wrapper Page peripheral control Overall layout width
#container or #content container, used for the outermost
#layout layout
#head, #header header part
#foot, #footer footer part
# nav main navigation
#subnav secondary navigation
#menu menu
#submenu submenu
#sideBar sidebar
#sidebar_a, #sidebar_b left sidebar or right sidebar
#main page Subject
#tag Tag
#msg #message Prompt message
#tips Tips
#vote Vote
#friendlink Friendly link
#title Title
#summary Summary
#loginbar login bar
#searchInput search input box
#hot hot spot
#search search
#search_output search output and search results are similar
#searchBar search bar
#search_results search Result
#copyright Copyright information
#branding Trademark
#logo Website LOGO mark
#siteinfo Website information
#siteinfoLegal Legal statement
#siteinfoCredits Credibility
#joinus Join us
#partner partner
#service service
#regsiter registration
arr/arrow arrow
#guild guide
#sitemap sitemap
#list list
#homepage homepage
#subpage secondary page subpage
#tool, #toolbar toolbar
#drop drop-down
#dorpmenu drop-down menu
#status status
#scroll scroll
.tab Tag page
.left .right .center Left, middle, right
.news News
.download Download
.banner Advertising banner (top advertising banner)
Electronic trade related
. products products
.products_prices product prices
.products_description product description
.products_review product reviews
.editor_review editor review
.news_release latest products
.publisher manufacturer
.screenshot abbreviation Outline
.faqs Frequently Asked Questions
.keyword Keyword
.blog Blog
.forum Forum
CSS File Naming Description
master.css,style.css Main
module .css module
base.css basically shares
layout.css layout, layout
themes.css theme
columns.css column
font.css text, font
forms.css form
mend.css Patch
print.css Print
Other instructions for CSS naming:
DIV+CSS naming summary: Whether you use "." (lowercase period) to select the name starting with the symbol, or use "# It doesn't matter whether the name starts with the "#" (pound sign) selection symbol, but we'd better follow it. The main, important, special, and outermost boxes should be named with the "#" (pound sign) selection symbol, and the others should use ". ” (lowercase period) selector symbol to start naming, also consider named CSS selectors to be reused in HTML calls.
Usually our most commonly used main names are: wrap (coat, outermost layer), header (header, header), nav (navigation bar), menu (menu), title (column title, generally matched with h1\h2 \h3\h4 tag use)
, content (content area), footer (footer, bottom), logo (logo, can be used with h1 tag), banner (advertising banner, usually at the top), copyRight (copyright) . Others can be used selectively according to your own needs.
DIVCSS5 recommendation: The main, important, and outermost boxes should be named starting with the "#" (pound sign) selection symbol, and the others should be named starting with the "." (lowercase period) selection symbol.
2. The CSS style file is named as follows

Main master.css

Layout, layout.css
Columns columns.css
Text font.css
Print style print .css
themes.css
4. English naming skills: - TOP

If you encounter something that is not commonly used, you can use a translation tool to translate it and name it in English.

It is recommended to use Google online translation tool:

The above is the detailed content of Complete list of div+css naming conventions. For more information, please follow other related articles on the PHP Chinese website!