In web development, how does one standardize CSS writing?

in Web how to enable CSS writing specifications are important. Correct and standardized writing CSS style sheets can improve the speed of webpages and the compatibility of various browsers, this helps developers who develop Programs better embed programs. For the current Web2.0, How to Write CSS style sheets are 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 is 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.
 

2 . style names start with letters and suffixes can contain letters, numbers, underscores, and hyphens, style names should contain easy-to-understand English words, such as . IMG. body-BG # left_nav … ( some general naming standards ) ; you can add a module ID or comm identifier , avoid conflict with the style of the independent module Abrupt !

3..VanHtmlBuilt-in labels andCSSAttribute names are written in uppercase letters, while custom style names andCSSThe attribute values are written in lowercase letters. For example:P {...} body {...}. P1 {color: Red}. li_bg {margin: 0px ;}And so on;

Thu . Use abbreviations for style attributes, such Margin , Padding , Border And so on ;
(Principle: Up - Right - Lower - Left --> Margin: 1px 2px 3px 4px Upper -( Right left )- Lower --> Margin: 1px 2px 3px
(Up/down) - (Left and right) --> Margin: 2px 4px Upper right lower 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;

V..In the process of 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, color: Red float: Left font-weight: bold and so on these attributes may be frequently used. 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 this more convenient? ^ _ ^

7. 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/fontSeries (Font-size/font-weight)/Color/Text-decoration/vitical-align

 

Naming of the ..css style:

For the naming conventions for CSS style sheets, see http://www.po-soft (listly). com/blog/listly/220.html(Remove "(listly)" from the address )")

For more CSS writing standards, we also need to summarize and learn them together. If you have better comments, please leave a message!