Front-End CSS Specification Collation _ reprint 、、、

I. Document specification

1, files are archived to the agreed directory.

Specific requirements through the Watercress CSS specification to explain:

All CSS is divided into two main categories: generic and Business classes. A generic CSS file, which is placed in the following directory:

• Basic Style Library/css/core

• Common UI element Style library/css/lib

• JS component related Style library/css/ui

The business class of CSS refers to specific product-related files, placed in the following directory:

• Reading/css/book/

• Movie/css/movie/

• Music/css/music/

• Community/css/sns/

• Elementary Station/css/site/

• /css/location/in the same city

• Radio/css/radio/

The external CSS file is suitable for large files at the full station level and at the product level. Inline CSS files apply to CSS that is shared on one or several pages. Another pair of specific CSS to document the collation. Such as:

• Util-01 Reset/css/core/reset.css

• UTIL-02 Universal Module Container/CSS/CORE/MOD.CSS

• Ui-01. Like Button/css/core/fav_btn.css

• Ui-02. Video/Album list item/CSS/CORE/MEDIA_ITEM.CSS

• ui-03. Comment on Star/css/core/rating.css

• ui-04. Universal Pushbutton/css/core/common_button.css

• Ui-05. Paging/css/core/pagination.css

• ui-06. Recommended Button/CSS/CORE/REC_BTN.CSS

• Ui-07. Legacy dialog Box/css/core/old_dialog.css

• ui-08. Old version Tab/css/core/old_tab.css

• ui-09. Legacy Members List/CSS/CORE/OLD_USERLIST.CSS

• Ui-10. Old Information Area/css/core/notify.css

• Ui-11. Community User Navigation/css/core/profile_nav.css

• Ui-12. Current Community Navigation/css/core/site_nav.css

• Ui-13. Loading in/CSS/LIB/LOADING.CSS

2. The introduction of documents can be introduced by means of external or inline.

• Outreach mode: (type declaration type= "Text/css" can be omitted)

• Inline mode: (type declaration type= "Text/css" can be omitted)

• Link and style tags should all be placed in the head, and in principle, the style is not allowed to be written directly on HTML. Avoid using @import in CSS and do not nest more than one layer.

3. filename, file encoding and file size

• The file name must consist of lowercase letters, numbers, and dashes

• The file must be encoded in UTF-8, use UTF-8 (non-BOM), specify UTF-8 encoding in HTML, and do not need to be specifically specified in CSS because the default is UTF-8.

• A single CSS file avoids being too large (less than 300 lines recommended)

II. specification of annotations

1. Comments at the top of the file (recommended)

/* * @description: 英文说明 * @author: Name * @update: Name (2013-04-13 18:32) */

2. Module annotations

/* Module:module1 by Zhang San */.../* Module:module2 by Zhang San */

module annotations must be written separately on one line

3. Single-line comment and multiline comment

/* This was a short comment */

Single-line comments can be written on a single line or at the end of a line, with no more than 40 kanji or 80 English characters in each row in the comment.

/*
* This was Comment line 1.
* This was Comment line 2.
*/

Multi-line comments must be written in a separate line

4. Special Notes

/* Todo:xxxx by name 2013-04-13 18:32 */

/* Bugfix:xxxx by name 2012-04-13 18:32 */

Used for labeling changes, to-dos, and other information

5. Block annotations

/* Header */* Footer */* Gallery */

Comment on a block of code (optional), partition the style statement and comment on the new line.

Third, naming norms

Use meaningful or generic ID and class naming: The name of the ID and class should reflect the functionality of the element or use a generic name instead of an abstract obscure name. The purpose of the reflection element is preferred; the use of a generic name means that the element is not table-specific, is not the same as its sibling elements, is usually used for secondary naming, and a functional or generic name can be more appropriate for a document or template change.

• /* Not recommended: meaningless */#yee-1901 {}

• /* Not recommended: related to Style */. Button-green {}.clear {}

• /* Recommended: Special */#gallery {} #login {}.video {}

• /* Recommended: Universal */. Aux {}.alt {}

Common naming (Multi-check English words): 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.

The shorter the ID and class name, the better, as long as it is sufficient to express the meaning. This helps to understand and improve code efficiency.

• /* Not recommended */#navigation {}.atr {}

• /* Recommended */#nav {}.author {}

The type selector avoids using the label, ID, and class as an element selector at the same time, and performance considerations should also minimize the hierarchy of selectors.

• /* Not recommended */ul#example {}div.error {}

• /* Recommended */#example {}.error {}

Points to be aware of when naming:

1. In rule naming, lowercase and underlined are used, and uppercase letters or _ are not allowed.

2. Names avoid using Chinese pinyin and should be combined with more concise and semantic English words

3. Naming note abbreviations, but not blindly abbreviated, see Common CSS naming conventions

4. Not allowed to be named by serial numbers 1, 2, 3, etc.

5. Avoid class and ID names

6. ID is used to identify a parent container area of a module or page, and the name must be unique, not arbitrarily new ID

7. Class is used to identify an object of a certain type, and the name must be concise.

8. To maximize the reuse of code modules, style as much as possible in a combination of ways

9. The rule name should not contain information about the color (red/blue), positioning (left/right), etc. that are related to the specific display effect. It should be named with meaning rather than the style display result.

1, the common ID name:

(1) Page structure

• Container: Container

• Page Header: Header

• Content: Content/container

• Page body: Main

• Page End: Footer

• Navigation: Nav

• Sidebar: Sidebar

• Column: Column

• Page perimeter control overall layout width: Wrapper

• Middle: Left Right center

(2) Navigation

• Navigation: Nav

• Main navigation: MAINBAV

• Sub-navigation: Subnav

• Top Navigation: Topnav

• Side navigation: Sidebar

• Left navigation: Leftsidebar

• Right navigation: Rightsidebar

• Menus: Menu

• Sub-menu: submenu

• Caption: Title

• Abstract: Summary

(3) function

• Logo: Logo

• Ad: Banner

• Login: Login

• Login Strip: Loginbar

• Registration: Regsiter

• Searches: Search

• Functional area: Shop

• Caption: Title

• Join: Joinus

• State: Status

• Button: BTN

• Scrolling: Scroll

• Tabs page: Tab

• Article List: List

• Hint Message: MSG

• Present: Current

• Tip: Tips

• Icons: Icon

• Note: note

• Guide: Guild

• Services: Service

• Hotspot: Hot

• Press: News

• Download: Download

• Vote: Vote

• PARTNER: Partner

• Links: Link

• Copyrights: Copyright

2, the common class name:

(1) Color: Use the name of the color or the 16 code, as shown in

• . red {color:red;}

• . F60 {color: #f60;}

• . ff8600 {color: #ff8600;}

(2) Font size, directly using "font+ font size" as the name, as

• . font12px {font-size:12px;}

• . font9pt {font-size:9pt;}

(3) Alignment style, using the English name of the alignment target, such as

• . left {float:left;}

• . bottom {float:bottom;}

(4) title bar style, named using "Category + function", as

• . Barnews {}

• . barproduct {}

Iv. Code of writing

1. Typesetting specification

(1) Use 4 spaces instead of tab or mix space +tab as indentation;

(2) Rules can be written in single line, or multiple lines, but the whole document must be unified in the layout of the rules;

Typographic constraints of single-line style writing styles

• If you are writing inline CSS in HTML, you must write a single line;

• The curly braces of each rule {preceded and preceded by a space;

• Each rule ends with a space before the curly brace};

• Attribute name preceded by a colon without a space, followed by a space after the colon;

• You must add a semicolon after each attribute value; And a semicolon after the space;

• Multiple selector share a style set, multiple selector must be written in multiple lines;

The typographic constraints of the multi-line form writing style

• The curly braces {before each rule are added spaces;

• Multiple selector share a style set, multiple selector must be written in multiple lines;

• The curly brace at the end of each rule must be aligned with the first character of the rule selector;

• Attribute name preceded by a colon without a space, followed by a space after the colon;

• Add a semicolon after the property value;

2. Attribute writing Order

1. Display Properties: Display/list-style/position/float/clear ...

2. Self attribute (box model): Width/height/margin/padding/border

3. Background: Background

4. Row Height: line-height

5. Text properties: Color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content ...

6. Others: Cursor/z-index/zoom/overflow

7. CSS3 Properties: Transform/transition/animation/box-shadow/border-radius

8. If you use the CSS3 property, add the browser prefix if necessary, then follow the order of-webkit-/-moz-/-ms-/-o-/STD, and the standard attributes are written at the end.

9. The style of the link is added in the following order: A:active, A:hover, a:visited, A:link

3. Rules writing Code

1. Using single quotes, double quotes are not allowed;

2. Each declaration should be terminated with a semicolon, whether or not the last declaration;

3. All code in the CSS file should be lowercase except for the 16 binary color and font settings;

4. In addition to resetting the default browser style, you are prohibited from adding CSS styling to HTML tags directly;

5. Each rule should ensure that selectors are unique and prohibit direct-to-global. Nav/.header/.body class setting properties;

4, Code performance optimization

1. Combine the-left/-top/-right/-bottom settings of margin, padding, border, and use the short name as much as possible.

2. Selectors should be as brief as possible on the basis of satisfying functions, reduce nesting of selectors, and query consumption. But be sure to avoid overriding global style settings.

3. Note the performance of the selector and do not use a low-performance selector.

4. Suppresses the use of the * selector in CSS.

5. Unless necessary, otherwise, there is usually a class or ID, do not need to write the tag corresponding to the element.

6. 0 does not need units, such as 0px can be omitted into 0,0.8px can be omitted. 8px.

7. If the color is 16 binary, the color value should be capitalized.

8. If you can, color as far as possible with three-bit characters, such as #aabbcc written #abc.

9. If there is no border, do not write border:0, should be written border:none.

10. Try to avoid using AlphaImageLoader.

11. Try to merge duplicate styles as much as possible while keeping the code decoupled.

12. Background, font, and so on can be abbreviated attributes, as far as possible using abbreviated form.

5, the use of CSS hack

Please do not use browser detection and CSS Hacks, first try another solution! Given the high efficiency and ease of management of the code, these two methods can quickly resolve differences in browser parsing, but should be considered as a last resort. In a long-term project, allowing the use of hack will only bring more hack, the more you use it, the more you will rely on it!

It is recommended to use the following:

6. Font rules

• In order to prevent file merging and encoding conversion caused problems, it is recommended to change the style of Chinese font name to the corresponding English name, such as: Bold (Simhei) Arial (SimSun) Microsoft Jache (Microsoft Yahei, a few words in the middle of a space must be quoted)

• The font weight is in a specific value, bold is written as 700, normal normally is written as 400

• Font-size must be in PX or PT, the PX (Note: PT is the print version of the font size setting), does not allow the use of Xx-small/x-small/small/medium/large/x-large/xx-large equivalents

• In order to unify the value of font-family, it is better to support the compatibility of each browser on each operating system, font-family does not allow arbitrary setting in business code

V. OTHER SPECIFICATIONS

• Do not easily change the full-station CSS and common CSS Library. After the change, it should be thoroughly tested.

• Avoid using filter

• Avoid using expression in CSS

• Avoid over-small background image tiling.

• Try not to use!important in CSS

• Never use the "*" selector in CSS

• The hierarchy (Z-index) must be clear, the page pop-up window, bubble is the highest (the highest level is 999), the different pop-up window bubbles can be adjusted between three digits, the ordinary block is 10-90 within a multiple of 10, chunk expansion, pop-up for the current parent level of the last bit increase, prohibit the blind comparisons between the levels.

• Background picture Please use Sprite technology as much as possible, reduce the HTTP request, consider the multi-person collaboration development, the sprite according to module, business, page to divide can.

VI. Test Specifications

1. Understanding Browser Effects Support

For page performance reasons, if the browser does not support CSS3 related properties, some of the browser's effects will no longer be supported, and the support for the property is shown in the following table (Y is supported, n is not supported):

2. Set the browser support standard

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

• B-level-visually allows for differences, but does not disrupt the overall effect of the page

• Level C-ignores design details, but does not interfere with the use of

3. Common Style test tools

CSS validator:http://jigsaw.w3.org/css-validator/

CSS lint:http://csslint.net/

CSS usage:https://addons.mozilla.org/en-us/firefox/addon/css-usage/

Front-End CSS Specification Collation _ reprint 、、、