How to standardize css style Writing in Web Development

In web development, it is very important to make css writing standards. Correct and standardized writing of css style sheets can improve the speed of web pages and the compatibility of various browsers, so that developers can better embed programs. For the current web, How to Write css style sheets is the best and most standard! There are almost no clear rules. In the entire development project, you only need to write a set of best practices for team development. Of course, many css style writing standards are similar. We need to continue to sum up.

The following specifications are summarized based on experience. For more information, see:

1. Try to use external calls for all CSS: This is the most important point I think, because it affects the speed of page loading.

<LINK href = "style/style.css" rel = "stylesheet" type = "text/css">

The first step is redefinition During writing, the second is the pseudo class, and the last step is the custom class (where a: link a: visited a: hover a: actived should be written in order) to facilitate reading by yourself and others.

To ensure that the font size of different browsers is consistent, we recommend that you define the font size using the pt and pixel px. pt generally uses the 9pt and 11pt of the Chinese, px is generally used in Chinese 1212pt and 14.7px. This is the optimized font size. When the bold characters are in black or simplified Chinese, the font size of 11pt and 14.7px is generally used.

II. style names start with letters, and suffixes can contain letters, numbers, underscores, and hyphens. Style names should contain easy-to-understand English words, such. img. body-bg # left_nav and so on (some general naming standards are attached later). For public custom Styles, you can add module or comm identifiers as appropriate to avoid conflicts with independent module Styles!

III. all html built-in tags and CSS attribute names are written in uppercase letters, while custom style names and CSS attribute values are written in lowercase letters, such as: P {...} BODY {...}. p1 {COLOR: red }. li_bg {MARGIN: 0px;} and so on;

4. Use abbreviations for style attributes, such as margin, padding, and border;
(Principle: top-right-bottom-left --> MARGIN: 1px 2px 3px 4px top-(right left)-bottom --> MARGIN: 1px 2px 3px
(Up and down)-(left and right) --> MARGIN: 2px 4px upper right bottom left --> MARGIN: 4px;
Font color: #000000 --> #000 #00 FFDD --> # 0FD;

Appendix: Abbreviation reference
There are a lot of CSS shorthand properties.

* Font
Font: font-style font-variant font-weight font-size/line-height font-family;
* Margin
Margin: margin-top margin-right margin-bottom margin-left;
* Padding
Padding: padding-top padding-right padding-bottom padding-left;
* Border
Border: border-width border-style border-color;
* Border-top
Border-top: border-top-width border-top-style border-top-color;
* Border-right
Border-right: border-right-width border-right-style border-right-color;
* Border-bottom
Border-bottom: border-bottom-width border-bottom-style border-bottom-color;
* Border-left
Border-left: border-left-width border-left-style border-left-color;
* Border-width
Border-width: border-top-width border-right-width border-bottom-width border-left-width
* Background
Background: background-color background-image background-repeat background-attachment background-position;
* List-style
List-style: list-style-type list-style-position list-style-image;
* Outline
Outline: outline-color outline-style outline-width;

5. when writing a style, try to write the style of the same partition module together, and add comments to facilitate reading and searching; for example, <-- Footer --> <-- End Footer --> or/* Footer */* End Footer */

6. style Abstraction: We can abstract some common styles as a type of style. For example, we may frequently use these attributes, such as COLOR: red FLOAT: left FONT-WEIGHT: bold, do we need to write a style for each element that needs to apply this style separately? The answer is clear: no; we can define:. red {COLOR: red}. fleft {FLOAT: left}. Is it more convenient? ^_^

VII. Efficiency Rules: (css attribute writing sequence)

1. display style
Display/position/float/clear
2. Style
Width/height/margin/padding/border/background
3. content style
Line-height/text-align/font series (font-size/font-weight)/color/text-decoration/vitical-align

Naming of the ..css style:

For the naming conventions for css style sheets, see the http://bbs.bkjia.com/thread-5242-1-1.html

Article