CSS best practices

CSS best practices (or specifications ):

1. Name:
1.1 Use easy-to-understand English words and name them by content/function;
{Frequently used names: page, wrap, layout, header (head), footer (foot, ft), content (cont), menu, nav, main, submain, sidebar (side), logo, banner, title (tit), popo (pop), icon, note, btn, txt, iblock, window (win), tips, etc }.
1.2 all names are marked in lower case, such as widget-title and widget-bd;
1.3 In addition to layout and unique independent modules, we recommend that you use less IDs to ensure id uniqueness;
1.4 improve the reuse of code modules as much as possible {the appearance and feeling can be used in a general sense, but the location cannot}, and give the module a namespace, such :. widget {...};. widget-title {...};. widget-bd {...};
1.5 to ensure performance, avoid mixing element selectors, class selectors, and id selectors. For example, ul # nav {}; div. error {};

2. CSS writing:
2.1. Order:
<1> display attribute: display | position | z-index | list-style | float | clear | overflow | zoom | cursor | ...;
<2> box model: margin | padding | width | height | border;
<3> text attributes: vertical-align | white-space | text-decoration | text-align | color | font | content | ...;
<4> background: background;

2.2. Abbreviations of attributes, such as margin, padding, font {font-style font-variant font-weight font-size/line-height font-family}, border {border-width border-style border-color}, background (background-color background-image background-repeat background-attachment background-position).

2.3. The pseudo-class Writing of the tag should strictly follow the order of a: link, a: visited, a: hover, a: active, otherwise it will become invalid in Some browsers.

3. encoding:
3.1. UTF-8 encoding is used. Add @ charset "UTF-8" in the first line of the Style File ";
3.2 To prevent file merging and encoding conversion problems, we recommend that you change the style Chinese font name to the corresponding English name, such as SimHei SimSun) (Microsoft Yahei, which consists of spaces, must be enclosed in quotation marks ).

4. Reset:
4.1. Reset the default style of the tag to achieve consistent effect across browsers, such as: body, h1-h6, p, ul, ol, li, dl, dt, dd ,... {margin: 0; padding: 0 }.
4.2 The background-color must be set for the body element to avoid compatibility problems caused by modifying the default value, such as background-color: "# ffffff ".
4.3 If the font size is em, you can set the body {font-size: 62.5%}, which is equivalent to changing the base size from 16 pixels to 10 pixels (16 x 62.5% = 10 ), for example, 1em equals 10 pixels, and 1.5em equals 15 pixels;
4.3. We recommend that you use Eric Meyer's reset.css or YUI's reset.css for extension.

5. Layout:
5.1 reduce the performance impact attributes, such as position: absolute | float;
5.2 When floating a non-Image Element, you must set the width for it; otherwise, the result is unpredictable; the image does not matter because it has the default width;
5.3. Two Functions of {overflow: hidden}: <1>. prevents large content from containing elements. <2>. reliably forces a parent element to include its floating child element;
5.4. The z-index must be clear and clear. The pop-up window on the page is at the top {value range: 900 ~ 999, such as showWin and pop}; bubbles are intermediate layers {value range: 100 ~ 899}; ordinary block is the bottom layer {value range: 1 ~ 99 };
5.5 word-wrap: break-word declaration should be applied to the outer packing elements of all columns so that all columns and their content can inherit this setting to solve the potential line feed problem;

6. Image:
6.1 The name must be a combination of lower-case English letters, numbers, and _. The name must be separated by underscores (_), such as ad_banner.jpg and btn_submit.png;
6.2. The image format is limited to gif | png | jpg;
6.3. Select the minimum image format and image quality to ensure the visual effect. To reduce the loading time, use "file-store as all Web formats to save images in {PS... "Or shortcut: Alt + Shift + Ctrl + S };
6.4, with the png format of the image, the image format is required for the png-8 format, if the png-8 really affects the quality of the image or which has a translucent effect, please ie6 a separate definition of the background image;
6.5 use sprite technology {by module} to reduce http requests as much as possible for background images. {Note: Make sure to back up your sprite psd source file };
6.6 put all page element images in the img folder, and put the testing images in the img/demo/folder;

Do not add units to the end of 7.0; do not add 0 before decimal places.

8. The font width is determined by a specific number. The bold value is 700, and the normal value is 400.

9. When you set the color, use the hexadecimal color unit. Use color: # ff0000 to replace color: red.

10. Do not use CSS Hack whenever possible. When there is a compatibility problem, first check that your code is compliant with the standard.

11. In addition to CSS Hack and browser private attributes, we recommend that you use w3c css validator or csslint for code verification.
I sorted out a CSS specification. Let's discuss it and see if there is any supplement!