The normalization of CSS naming and its writing

CSS Naming conventions

A File Naming conventions

Global style: GLOBAL.CSS;
Frame layout: layout.css;
Font style: Font.css;
Link style: link.css;
Print style: print.css;

Two Common class/ID naming conventions

Headers: Header
Contents: Content
Container: Container
Footer: Footer
Copyrights: Copyright
Navigation: Menu
Main navigation: MainMenu
Sub-navigation: submenu
Logo: Logo
Slogan: Banner
Caption: Title
Side bar: Sidebar
Icons: Icon
Note: note
Searches: Search
Button: BTN
Login: Login
Links: Link
Info box: Manage
......

The naming of commonly used classes should be as common as possible in English words, to be easy to understand, and in the appropriate place to comment. For class/id named two, the combined writing mode is used, the first letter of the next word should be capitalized: such as "search box" should be named "Searchinput", "Search icon" named this "Searchicon", "Search button" named "Searchbtn" ...

CSS writing specifications and methods

I. General writing specifications and methods

1. Select doctype:

XHTML 1.0 provides three types of DTD declarations to choose from:

Transition (Transitional): A very liberal DTD that allows you to continue to use HTML4.01 's identity (but to conform to XHTML notation). The complete code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Strict (Strict): Requires strict DTD, you cannot use any of the presentation layer's identity and attributes, such as <br>. The complete code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Framework (Frameset): A DTD used specifically for frame page design, if your page contains frames, you need to use this DTD. The complete code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

The ideal scenario is of course a strict DTD, but for most of us who are new to Web standards, the transition DTD (XHTML 1.0 Transitional) is the ideal choice (including this site, which is also a transitional DTD). Because this DTD also allows us to use the identity, elements and attributes of the presentation layer, it is also easier to pass the code validation.

2. Specify the language and character set:

Specify the language for the document:

In order to be properly interpreted by the browser and verified by the Web code, all XHTML documents must declare the encoding language they are using, such as:
Common Language Definitions:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8″/>
Standard XML Document Language definition:
<?xml version= "1.0″encoding=" utf-8″?>
Language definitions for older versions of browsers:
<meta http-equiv= "Content-language" content= "utf-8″/>
To improve the character set, it is recommended to use "Utf-8".

3. Call the style sheet:

External style sheet invocation:

Page embedding: The style sheet is written directly in the head area of the page code. Such as:

<style type= "Text/css" ><!–body {background:white; color:black;}–> </style>
External calling Method: Write the stylesheet in a separate. css file, and then call it in the page head area similar to the following code.

<link rel= "stylesheet" rev= "stylesheet" href= "Css/style.css" type= "Text/css" media= "All"/>

In a web-compliant design, it is recommended to use external tuning to change the style of the page without modifying the page to modify only the. css file. If all the pages call the same stylesheet file, then changing the style sheet file will change the style of all the files.

4, choose the appropriate elements:

Select HTML elements based on the structure of the document, rather than depending on the style of the HTML element. For example, use the P element to include a paragraph of text instead of wrapping it. If you cannot find the appropriate element when creating a document, you might consider using a generic p or span;

Avoid transitions using p and span. A small amount of appropriate use of p and span elements can make the structure of the document more clear and reasonable and easy to use style;

Minimize the use of tags and structure nesting, so that not only can make the document structure clear, but also can maintain the small file, while improving the user download speed, but also easy to browser interpretation of the document and view;

5. Derived selectors:

You can use a derived selector to define a style for a child element in an element, simplifying the naming and also making the structure clearer, such as:

. MainMenu ul li {background:url (images/bg.gif;)}

6, auxiliary picture with back chart processing:

The "secondary pictures" here refer to images that are not part of the content to be expressed as pages, but only for retouching, spacing, reminders. It can be used to do the back chart processing, without changing the page in the case of CSS style to make changes, such as:

#logo {background:url (images/logo.jpg) #FEFEFE no-repeat right Bottom;}

7, structure and style separation:

Only the structure of the document is written in the page, and the style is written in the CSS file, and the structure and style are separated by invoking the CSS style sheet externally.

8, the structure of the document writing:

Page CSS documents should be structured to write, clear logic and easy to read. Such as:

<p id= "MainMenu" >
<ul>
<li><a href= "#" > Home </a></li>
<li><a href= "#" > Introduction </a></li>
<li><a href= "#" > Services </a></li>
</ul>
</p>

/*===== Main navigation =====*/
#mainMenu {
width:100%;
height:30px;
Background:url (images/mainmenu_bg.jpg) repeat-x;
}
#mainMenu ul Li {
Float:left;
line-height:30px;
margin-right:1px;
Cursor:pointer;
}
/*===== Main navigation End =====*/

9. Mouse gestures:

In the XHTML standard, hand is only recognized by IE, when it is necessary to convert the mouse gesture to "hand", then "hand" is changed to "pointer", that is, "cursor:pointer;"