-CSS Development specification of Douban front-end development specification

1. CSS Browser support standard

	WinXP	Win7	OS X
IE9	C	C
IE8	A	A
IE7	A	A
IE6	A	A
Chrome7	C	C	C
Chrome6	A	A	A
Chrome3	B	B	B
Firefox4	C	C	C
Firefox3.6	A	A	A
Firefox3.5	C	C
Firefox3	C	C
Safari	B	B	B
Opera	C	C	C

(Note: According to November 10, 2010 data collation)

• Class A-interaction and vision requirements for fully embox design

• B-level-visually allows for differences without disrupting the overall effect of the page

• Level C-can ignore visual problems, but do not interfere with the use of

2. Reuse the existing style 3 as much as possible through inheritance and cascading. According to the new style, the scope of application is divided into three levels: the total station level, the product level, the page level

• 3-1. The current full-station CSS file has only Core.css and douban.css (add rules to the full-site CSS file see 4 and 5).

• 3-2. Product-level CSS refers to a vertical product (such as music, reading, radio, etc.), the file is placed under the corresponding directory under css/.

Page level refers to only one or a few pages. If the inline CSS file is embedded in the page head with more than two pages in a single page, the file is then placed in the appropriate product catalog.

4. CORE.CSS is the basic style of the whole station. It needs to be placed at the front of all CSS references. It includes: tag reset, common rules (link, font, hide, clear float, etc.), layout, basic styles of various modules, etc.

See also: Http://img3.douban.com/css/packed_core1.css

5. Do not easily change the full-station CSS. After the change, you have to undergo a thorough test 6. Writing format requirements for a single CSS rule

• 6-1. The attribute needs to be written on one line. You need to add spaces before and after "{" and "}".

. selector {property:value;property:value;}

• 6-2. Multiple (>2) selector per row:

. Selector1,

. Selector2,

. Selector3 {property:value;property:value;}

• 6-3. When multiple browsers are compatible, write the standard attributes in the following example:

-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;

7. Set the CSS rules that act on different modules together, and annotate them with annotations

Format of comments:

/* Mod:doulist */

Common rules are also categorized together. General rules are in front of specific module rules. Such as:

/* Button */

...

/* MoD */

...

/* NAV */

...

/* Mod:events Album */

8. ID and class name. Name do not use abbreviations, between words with "-" as a connector

• 8-1. ID is used to identify a specific module, and the name must be specific and unique, consisting of a prefix and a name. Do not misuse the ID. such as: #db-video-list.

• 8-2. Class is used to identify an element of a certain type, and the name concise table means it is clear. such as:. List.

• 8-3. Naming examples:

Bad:

#rec

. gray-link

. BROADSMR

. pl

Good:

#db-nav-main

. infobox

. Item

1. 8-4. Recommended class Name:

Represents a state	. On,. Active,. selected,. Hili
Represents a location	. First,. Last,. Main,. Side
Representation structure	. HD,. BD,. ft,. Col,. Section
Common Elements	. TB,. frm,. nav,. List,. Item,. tag,. pic,. Info

9. Try to avoid using CSS Hack

It is recommended to use the following:

distinguishing attribute:

IE6	_property: Value
ie6/7	* Property:value
IE6/7/8/9	property: Value9
non-IE6

Rule of Distinction:

IE6	* HTML Selector {...}
IE7	*:first-child+html Selector {...}
Non-IE6	Html>body Selector {...}
Firefox only	@-moz-document Url-prefix () {...}
saf3+/chrome1+	@media all and (-webkit-min-device-pixel-ratio:0) {...}
Opera only	@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {...}
Iphone/mobile WebKit	@media screen and (max-device-width:480px) {...}

10. Use after or overflow to clear the float 11. Both inline and inline CSS must be placed in the head of the page. Order is: full-station CSS, product-level CSS, page-level (external) CSS, page-level (inline) CSS, inline CSS12. Avoid the use of inefficient selectors

Such as:

Body > * {...}

UL > li > a {...}

#footer > h3 {...}

Ul#top_blue_nav {...}

#searbar span.submit a {...}

13. Avoid using Filter14 as much as possible. Do not directly modify the style of the label

such as: div {...}

15. Do not write the style directly on the label

such as: <div style= "margin-bottom:30px;" >

16. Do not use expression17 in CSS. Do not use @import 18 in CSS. Do not use!important19 in CSS. Never use the "*" selector in CSS

-CSS Development specification of Douban front-end development specification