DIV CSS Tip: Some personal understanding of CSS naming

css| Tips

With a piece of CSS Layout design Web page, found that their naming a little confusing, completely according to their own ideas named, although there is no impact, there is not to see the source file, but the studio sometimes and team work to complete the project, it encountered trouble, to modify a place quite trouble. So there is a standard better ah!

On the Internet to see a reference, coupled with the usual study of other people's code, found that some of the name used very widely!

Naming Reference

Common CSS naming rules:

Header: Header
Content: Content/container
Tail: Footer
Navigation: Nav
Sidebar: Sidebar
Column: Column
Page perimeter control overall layout width: Wrapper
Left Right Center

Name all use lowercase letters, if you need more than one word, use "-" to separate words, such as user-list

Common code structure:

Div: Mainly for layout, split the structure of the page
Ul/ol: For unordered/ordered lists
Span: There is no special meaning that can be used as a support for typesetting, for example

<li><span> (4.23) </span> The six anniversary of the Magic net six anniversary of the Magic network six years of Magic network six </li>

Then define span as right float in CSS, and realize the effect of date and caption display on both sides

H1-h6: Title
H1-h6 Descending according to importance
The most important title of the H1 bit

<label for= "User-password" > Password </label>
<input type= "password" name= "password" id= "User-password"/>

Fildset & Legend:fildset are set outside the form, and legend is used to describe the contents of the form. For example:

<form>
<fildset>
<legend>title</legend>
<label for= "User-password" > Password </label>
<input type= "password" name= "password" id= "User-password"/>
</fieldset>
</form>

DL,DT,DD: When the first action appears on the page similar to a title/brief, then the following is a detailed description of the content should use the label, for example

<dl>
<dt> What is css?</dt>
<dd>css is a technique called style sheet (stylesheet). Some people call it cascading style sheets (cascading Stylesheet). <dd>
<dt> What is XHTML? </dt>
<dd>xhtml is an xml-based markup language that seems to be somewhat imagined with HTML, with only a few small but important differences. As you can see, XHTML is an XML that acts like an HTML role. XHTML is essentially a bridging (transition) technology that combines the power of XML (in some cases) with the simple features of HTML (most). </dd>
</dl>

C #content

S #subcol

M #maincol

X #xcol

This is the vertical layout of the XHTML structure, c-smx that the Web page has three columns, C-SM said there are two columns, C-MX indicates that two columns one is attached, c-m represents a vertical bar.

The layout of the three columns needs to be divided into two layers: the first layer is #subcol and #main the second layer is the #maincol and #xcol in #main

Custom naming:

According to the web site, it is best to name the meaning, such as: Important news highlighting (like red). There are two kinds of

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

It's clear that the second message is more explicit, so try not to use it as your own custom name.