div css naming convention (transferred)_html/css_WEB-ITnose

I used a CSS layout to design a web page, and found that my naming was a bit confusing. I named it exactly according to my own ideas. Although it has no impact, I don’t show the source file to others, but the studio sometimes cooperates with the team to complete the project. When I was working on it, I ran into trouble. It was quite troublesome to modify a place. So it is better to have a standard!
I saw a related reference on the Internet, plus I also study other people’s code in my daily life, and found that Such naming is widely used! I added my own experience and hope it will be useful to people who read this article!

Naming convention

Commonly used CSS naming rules:

Header: header
Content: content/container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left right center: left right center

Use all lowercase letters for naming. If multiple words are needed, use "-" to separate the words, such as user-list

Common code structure:

div: mainly used for layout, dividing the structure of the page
ul/ol: used for unordered/ordered lists
span: has no extraordinary meaning and can be used as an auxiliary for typesetting, such as

Example Source Code [www.mb5u.com]

(4.23)The sixth anniversary of Tianhuan.com The sixth anniversary of Tianhuan.com Tianhuan.com Sixth Anniversary Tianhuan.com Sixth Anniversary Tianhuan.com Sixth Anniversary Tianhuan.com Sixth Anniversary Template Wuyou-Mb5u.com
Then define span in css to float to the right, so that the date and title can be displayed on both sides Effect

h1-h6: Title
h1-h6 in descending order according to importance
h1 most important title

label: In order to make your form more friendly and also Good things that can assist in form layout, such as:

Example Source Code [www.mb5u.com]

password

fieldset & legend: fildset is outside the form , legend is used to describe the form content. For example:

Example Source Code [www.mb5u.com]

title

MB5U_COM
password

dl,dt,dd: When the first line appears on the page, it is similar to a title/brief description, and then the following is a specific description This tag should be used when containing content, such as

Example Source Code [www.mb5u.com]

What is CSS?< ;/dt>

CSS is a technology called stylesheet. Some people also call it Cascading Stylesheet.

What is XHTML?

XHTML is an XML-based markup language that looks similar to HTML, with only some small but important differences. You can look at it this way, XHTML is XML that plays a role similar to HTML. In essence, XHTML is a bridging (transition) technology that combines the power of XML (somewhat) with the simplicity of HTML (mostly).

MB5u.com__template worry-free

Example Source Code [www.mb5u.com]

C #content

S #subcol

M #maincol

X #xcol

This is the XHTML structure for portrait layout, c- smx means that the web page has three columns, c-sm means there are two columns, c-mx means there are two columns, one of which is attached, and c-m means one column.

The three-column layout needs to be divided into two layers. The first layer is #subcol and #main. The second layer is #maincol and #xcol in #main.

Custom naming:
According to the w3c website, it is best to name with meaning
For example: important news is highlighted (like red)
There are two kinds

Example Source Code [www.mb5u.com]

.red{color:red}
.important-news{color:red}

Mb5U.com - Template Wuyou

Obviously the second one conveys a clearer meaning, so try not to use an unclear meaning as your own custom name.