Standardization of CSS naming and writing

CSS naming convention

one. File naming convention

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 convention

Header: header
Content: content
Container: container
Footer: footer
Copyright：copyright
Navigation: menu
Main navigation: mainMenu
Sub navigation: subMenu
Logo: logo
Slogan: banner
Title: title
Sidebar: sidebar
Icon: Icon
Note: note
Search: search
Button: btn
Login: login
Link: link
Information box: manage
……

The naming of commonly used classes should be based on common English words as much as possible, making them easy to understand, and annotated in appropriate places. For secondary class/ID naming, the combined writing mode is adopted, and the first letter of the last word should be capitalized: such as "search box" should be named "searchInput", "search icon" should be named "searchIcon", "search button" "Named "searchBtn"......

CSS writing specifications and methods

1. Conventional writing standards and methods

1. Select DOCTYPE:

XHTML 1.0 provides three DTD declarations to choose from:

Transitional: A DTD with very loose requirements, which allows you to continue to use the HTML4.01 logo (but must comply with the xhtml writing method). The complete code is as follows:

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Strict: For a strict DTD, you cannot use any presentation layer identifiers and attributes, such as
. The complete code is as follows:

-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Frameset: A DTD specifically designed for frame pages. If your page contains a frame, you need to use this DTD. The complete code is as follows:

-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

The ideal situation is of course a strict DTD, but for most of us designers who are new to web standards, transitional DTD (XHTML 1.0 Transitional) is currently the ideal choice (including this site, which also uses transitional DTD). Because this DTD also allows us to use presentation layer identifiers, elements and attributes, it is also easier to pass W3C code verification.

2. Specify language and character set:

Specify the language for the document:

In order to be correctly interpreted by browsers and pass W3C code verification, all XHTML documents must declare the encoding language they use; such as:
Commonly used language definitions:

Standard XML document language definition:

Language definition for older browsers:

To improve the character set, it is recommended to use "utf-8".

3. Call the style sheet:

External style sheet call:

Page inline method: The style sheet is written directly in the head area of ​​the page code. like:

External calling method: Write the style sheet in a separate .css file, and then call it with code similar to the following in the head area of ​​the page.

In a design that complies with web standards, it is recommended to use the external calling method, which can change the style of the page without modifying the page and only modifying the .css file. If all pages call the same style sheet file, then changing one style sheet file can change the styles of all files.

4. Select appropriate elements:

Select HTML elements based on the structure of the document, not the style of the HTML elements. For example, use the P element to contain paragraphs of text, not for line breaks. If you cannot find the appropriate element when creating the document, you may consider using a generic p or span;

Avoid excessive use of p and span. A small amount of appropriate use of p and span elements can make the structure of the document clearer and more reasonable and easy to use styles;

Use tags and structural nesting as little as possible. This will not only make the document structure clear, but also keep the file small. While improving the user's download speed, it will also make it easier for the browser to interpret and display the document;

5. Derived selector:

You can use derived selectors to define styles for child elements within an element, which simplifies naming and makes the structure clearer, such as:

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

6. Use back image processing for auxiliary images:

The "auxiliary pictures" here refer to pictures that are not part of the content to be expressed on the page, but are only used for decoration, interval, and reminder. Process it as a back image, which can be changed through CSS styles without changing the page, such as:

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

7. Separation of structure and style:

Only the structure of the document is written in the page, and the style is written in the css file. The separation of structure and style is achieved by externally calling the CSS style sheet.

8. Structured writing of documents:

The CSS documents on the page should be written in a structured way, with clear logic and easy to read. like:

• Homepage


• Introduction


• Service

/*======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;
}
/*=====End of main navigation=====*/

9. Mouse gestures:

In the XHTML standard, hand is only recognized by IE. When you need to convert mouse gestures into "hand shapes", replace "hand" with "pointer", that is, "cursor:pointer;"

The above is the detailed content of Standardization of CSS naming and writing. For more information, please follow other related articles on the PHP Chinese website!