Web page making talk about the naming conventions for CSS style sheets

css| Specification | Web page | style sheet

Recently collaborated with a programmer project. Make my head is big ~ Blame my CSS name can not understand ~ to follow his. As a result, I opened his page, and looked, the first from the beginning is Contentcommon, the following are all content****. I explained my reasons, after half a while, seems to be accepted, but suddenly came to a: "Do not use the H tag!" and do not use the UL to define navigation and so on. For many of the programmers who have worked together, most of them are like this, and the naming conventions are mostly from one faction to the other. It is a blind eye to the standard of production. Take care of only ie normal browsing attitude shouting "Let Firefox and Safari go to hell!"

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

　　Visual naming

When designing a Web page and identifying a div, the most natural idea is to name it using words that describe the location of the page where the element resides. This method makes the name of the class and ID as follows:

• Top-panel
• Horizontal-nav
• Left-side
• Center-column
• Right-col

These are valid naming methods for CSS and XHTML classes and IDs. These words are simple and can make people name as they are, thus satisfying the need to identify page elements and corresponding CSS styles.

The problem is that the name is associated with the specific expression of the page content. These names refer to the position of the page element in a particular page layout, so using it outside of such a layout would be inappropriate and even confusing to understand. At the same time, these names do not involve the structure of the document content. Therefore, a better way to name CSS classes and IDs is given below.

　　Structured naming

Structured markup means a complete separation of the expression/location information from the content-including the class and ID names that appear in the tag (markup).

Tagged related information is used to describe the structure of a document rather than its appearance. This feature allows us to reuse the content and tags (markup) in different look formats by simply changing the CSS. When you understand this, it's easy to see that the way you use the page position to name the class and ID is very inappropriate in terms of processing such as audio (audio) appearance formats. For this reason, classes and IDs should be structured according to their purpose in the document rather than where they appear.

You can name the class and the ID name in a structured manner as shown below:

• Branding
• Main-nav
• Subnav
• Main-content
• Sidebar

These names are as easy to understand as visual naming, but they describe the role of the page element rather than the location. This makes the code more consistent with the use of pure structured markup (structural markup), where developers can handle the display format of various media without changing the markup.

Even if you don't plan to format Web pages on other media, using structured naming can also help you make it easier to upgrade or redesign your site in the future. For example, structured naming avoids the confusion that occurs when a div and ID right-column move to the left of the page. The naming of Div sidebar is more appropriate, because no matter which side it appears on the page, the name is still intuitive to the developer.

　　Practice

List of examples of the most common class/id names:

• Header
• Content
• Nav
• Sidebar
• Footer

　　Common Tags:

Div: Mainly for layout, split the structure of the page

Ul/ol: For unordered/ordered lists

Span: No special meaning, can be used as the auxiliary of typesetting

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"/>

(XHTML 1.0 Strict cannot be passed, you can use "P", "H1", "H2", "H3", "H4", "H5", "H6", "div", "pre",

"Address", "fieldset", "ins", "Del"

DL DD DT Defines the list, when the first behavior appears in the page similar to the title/brief, and then the following is the detailed description of the content should use the label

<dl>
<dt> Cat
<dd> a small pet that can be kept.
<dt> Lizard
<dd> can usually be found in dry areas of reptiles.
</dl>