We know that HTML has its strict naming rules, so today we will integrate these rules to avoid naming misunderstandings, and if you standardize the use of DIV+CSS naming rules in your web page production, you can significantly improve the optimization effect, especially When teamwork, the efficiency of collaborative production is significantly improved.

When we develop CSS+DIV web pages (Xhtml), the most confusing and tangled thing is CSS naming, especially novices who don’t know what to name and what is the best way to name it.

1. Description of naming rules: - TOP

1), all names should be lowercase

2), attribute values ​​must use double quotes ("" ), and 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 regular layout. Neat

4), empty elements must have an ending tag or add "/" after the beginning tag

5), performance and structure are completely separated, and no performance is involved in the code The definitions of elements, such as style, font, bgColor, border, etc.

6),

to

should follow the principle from large to small to reflect the structure of the document and facilitate search. Engine query.

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:

Coat wrap --------------- ---Used for the outermost layer

header ----------------Used for the header

main content main ---- --------Used for main content (middle)

Left main-left -------------Left layout

Right main-right -----------Right layout

Navigation bar nav ------------------Web menu navigation bar

Content ---------------Used for the middle body of the web page

Bottom footer --------------- Used at the bottom

3. DIV+CSS naming reference table: - TOP

The following is the CSS style naming and CSS file naming reference table, DIV CSS naming Collection:

CSS style naming Description

Web page public naming

#wrapper Page peripheral control overall layout width

#container or #content container, used 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 or right column

#main page body

#tag tag

#msg #message prompt message

#tips tips

#vote vote

#friendlink friendlink

#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 results

#copyright Copyright information

#branding Trademark

#logo Website LOGO

#siteinfo Website information

#siteinfoLegal Legal Statement

#siteinfoCredits Reputation

#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 tab page

.left .right .center left , middle, right

.news news

.download download

.banner advertising banner (top advertising banner)

Electronic trade related

.products Product

.products_prices Product price

.products_description Product description

.products_review Product review

.editor_review Editor review

.news_release Latest products

.publisher Manufacturer

.screenshot Thumbnail

.faqs FAQ

.keyword Keyword

.blog Blog

.forum Forum

CSS File Naming Description

master.css,style.css Main

module.css module

base.css is basically shared

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: It doesn’t matter whether you use “.” (lowercase period) to choose a symbol to start naming, or use “#” (pound sign) to choose a symbol to start naming, but we’d better follow, the main and important The special, outermost box is named starting with the "#" (pound sign) selection symbol, and the others are named starting with the "." (lowercase period) selection symbol. Also consider the naming CSS selectorReuse calls in HTML.

Usually our most commonly used main names are: wrap (coat, outermost layer), header (header, head), nav (navigation bar), menu (menu), title (column title, general coordination h1\h2\h3\h4 tags are used)

, content (content area), footer (footer, bottom), logo (logo, can be used with h1 tags), 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

Theme themes.css

4. English naming skills:

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

It is recommended to use the Google online translation tool: http://translate.google.cn/

Standardized CSS naming brings many benefits, I hope everyone Strictly abide by the naming rules to make it convenient for you, me and others.

Related reading:

How HTML calls CSS to manage and beautify divs

css+div typical layout basic framework

Example showing DIV+CSS implementation of radio station list

The above is the detailed content of Naming rules in HTML. For more information, please follow other related articles on the PHP Chinese website!