Div + css naming rules, divcss naming

Div + css naming rules, divcss naming

I. Description of naming rules:-TOP

1) It is recommended that all names be in lower case.
2) attribute values must be enclosed in double quotation marks ("") and must have values such as class = "divcss5", id = "divcss5"
3) Each label must have a start and end, a correct level, and regular layout.
4) The empty element must have an ending tag or add "/" after the starting tag "/"
5) the representation and structure are completely separated. The Code does not contain any presentation elements, such as style, font, bgColor, and border.
6) The definitions from 7) Add a unique structure tag id to each table and form.
8) Add the alt tag to the image.
9) Use naming rules in English as much as possible
10) Try not to be abbreviated, except words that can be understood without looking at them.
DIVCSS5 introduces common CSS naming and div css naming methods.
Ii. Naming of CSS styles that are important to the outer part of a webpage:-TOP

Coat wrap ------------------ used for the outermost layer
Header -------------- used for the header
Main Content main ------------ used for subject content (central part)
Left-side main-left ----------- left-side layout
Right-side main-right --------- right-side layout
Navigation bar nav ----------------- web menu navigation bar
Content --------------- used by the subject in the central part of the webpage
Bottom footer ----------------- used for bottom
Iii. Reference Table for DIV + CSS naming:-TOP

The following is a reference table for CSS style naming and CSS file naming, and a set of div css naming:

CSS style naming	Description
Public name of webpage
# Wrapper	Overall Layout width of the page peripheral control
# Container or # content	Container for the outermost layer
# Layout	Layout
# Head, # header	Page header
# Foot, # footer	Footer
# Nav	Main navigation
# Subnav	Level 2 navigation
# Menu	Menu
# Submenu	Sub-menu
# SideBar	Sidebar
# Sidebar_a, # sidebar_ B	Left or right sidebar
# Main	Page subject
# Tag	Tag
# Msg # message	Prompt information
# Tips	Tips
# Vote	Vote
# Friendlink	Friendship
# Title	Title
# Summary	Summary
# Loginbar	Logon entry
# SearchInput	Search input box
# Hot	Hot spots
# Search	Search
# Search_output	The search output is similar to the search result.
# SearchBar	Search entries
# Search_results	Search results
# Copyright	Copyright information
# Branding	Trademark
# Logo	Website LOGO
# Siteinfo	Website Information
# SiteinfoLegal	Legal disclaimer
# SiteinfoCredits	Credit
# Joinus	Join us
# Partner	Partner
# Service	Service
# Regsiter	Register
Arr/arrow	Arrow
# Guild	Guide
# Sitemap	Website Map
# List	List
# Homepage	Homepage
# Subpage	Second-level page subpage
# Tool, # toolbar	Tool bar
# Drop	Drop-down list
# Dorpmenu	Drop-down menu
# Status	Status
# Scroll	Scroll
. Tab	Tab
. Left. right. center	Center left, center, right
. News	News
. Download	Download
. Banner	Advertisement bar (top advertisement bar)
Electronic trade problems
. Products	Product
. Products_prices	Product Price
. Products_description	Product Description
. Products_review	Product reviews
. Editor_review	Edit comment
. News_release	Latest Product
. Publisher	Manufacturer
. Screenshot	Thumbnail
. Faqs	FAQs
. Keyword	Keywords
. Blog	Blog
. Forum	Forum

 

 

CSS file name	Description
Master.css,style.css	Main
Module.css	Module
Base.css	Basic sharing
Layout.css	Layout
Themes.css	Topic
Columns.css	Column
Font.css	Text, font
Forms.css	Form
Mend.css	Patch
Print.css	Print

CSS style naming
Public name of webpage
# Overall layout width of the wrapper page peripheral control
# Container or # content container for the outermost layer
# Layout
# Head, # header
# Foot, # footer
# Nav main navigation
# Subnav second-level navigation
# Menu
# Submenu
# SideBar
# Sidebar_a, # sidebar_ B left or right sidebar
# Main Page subject
# Tag
# Msg # message prompt information
# Tips
# Vote Voting
# Friend Link
# Title
# Summary
# Loginbar logon entry
# SearchInput search input box
# Hot Spots
# Search
# Search_output the search output is similar to the search result
# SearchBar search
# Search_results search results
# Copyright information
# Branding Trademark
# Logo Website LOGO
# Siteinfo website information
# SiteinfoLegal legal statement
# SiteinfoCredits reputation
# Join Us
# Partner partners
# Service
# Register regsiter
Arr/arrow arrows
# Guild Guide
# Sitemap
# List
# Homepage
# Subpage
# Tool, # toolbar tool bar
# Drop down
# Dorpmenu drop-down menu
# Status
# Scroll
. Tab
. Left. right. center
. News
. Download
. Banner advertising bar (top advertising bar)
Electronic trade problems
. Products Product
. Products_prices product price
. Products_description product description
. Products_review product comments
. Editor_review edit comment
. News_release latest product
. Publisher producer
. Screenshot thumbnail
. Faqs FAQ
. Keyword keywords
. Blog
. Forum
CSS file naming
Master.css,style.css
Module.css Module
Base.css
Layout.css layout, Layout
Themes.css topic
Columns.css
Font.css text and font
Forms.css form
Mend.css patch
Print.css Printing
Other descriptions of CSS naming:
DIV + CSS naming Summary: whether it is to use ". "(lower-case periods) It doesn't matter if you select the name starting with the symbol or use" # "(well number) to select the name starting with the symbol, but we 'd better follow this, the main, important, special, and outermost boxes are named at the beginning of the "#" (well number) Selection symbol, and ". (lowercase periods) Select the name starting with a symbol, and the CSS selector to be named must be called repeatedly in HTML.
Generally, the most common names are: wrap (coat, outermost layer), header (header, header), nav (navigation bar), menu (menu) title (topic title, generally used with the h1 \ h2 \ h3 \ h4 label)
, Content (content area), footer (footer, bottom), logo (logo, can be used with the h1 label), banner (advertisement bar, usually on the top), copyRight (copyRight ). Others can be used as needed.
For DIVCSS5, we recommend that you use the "#" (well number) to start and name the main, important, and outermost boxes, and use the "." (lower-case periods) to start with the symbol.
2. Name the CSS style file as follows:

Main master.css
Layout.css
Columns.css
Text font.css
Print Style print.css
Themes.css
4. English naming skills:-TOP

If it is not commonly used, you can use the translation tool to translate it into English.
Recommended use of Google online translation tools: http://translate.google.cn/