css| Reference | Web page with a section of CSS Layout Design Web page, found that their name is a bit confusing, completely according to their own ideas named, although no impact, there is no one to see the source file, but the studio sometimes with the team to complete the project, it encountered trouble, It's quite a lot of trouble to change a place. So there is a better standard!
On the Internet to see a related reference, coupled with the usual study of other people's Code, found that the use of the name is very wide! I would like to add my own experience, I hope to see this article can be useful to people!
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
(4.23) The six anniversary of the Magic net six anniversary of the Magic network six years of Magic network six
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: Good things to make your form more approachable and to assist with form typesetting, for example:
Password
FieldSet & Legend:fildset are set outside the form, and legend is used to describe the contents of the form. For example:
title
Password
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
-
What is css?
-
css is a technique called style sheet (stylesheet). Some people call it cascading style sheets (cascading Stylesheet).
-
-
What is XHTML?
-
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).
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's best to name it by meaning
For example: is 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.
