CSS coding specifications

I. document specifications

1. All files are archived to the agreed directory (the specific requirements are described in the case of the CSS specification of Douban ):

All CSS types are classified into two categories: Generic and business. Common CSS files are stored in the following directory:

• Basic Style Library/CSS/Core
• General UI element style Library/CSS/lib
• JS component-related style Library/CSS/UI

CSS of the business class refers to the files related to specific products, which are stored in the following directory:

• Reading/CSS/book/
• Movie/CSS/movie/
• Music/CSS/music/
• Community/CSS/SNS/
• Small site/CSS/site/
• Local/CSS/location/
• Radio station/CSS/Radio/

The external CSS file is applicable to all-site and product-level general large files. Inline CSS files are applicable to CSS shared on one or more pages. In addition, a specific pair of CSS files are documented. For example:

• 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 items/CSS/CORE/media_item.css
• Ui-03. Rating/CSS/CORE/rating.css
• Ui-04. Universal button/CSS/CORE/common_button.css
• Ui-05. pagination/CSS/CORE/pagination.css
• Ui-06. Recommended button/CSS/CORE/rec_btn.css
• Ui-07. Old Version dialog box/CSS/CORE/old_dialog.css
• Ui-08. Old TAB/CSS/CORE/old_tab.css
• Ui-09. Old Version member list/CSS/CORE/old_userlist.css
• Ui-10. Old Version Information Zone/CSS/CORE/yy.css
• Ui-11. Community user navigation/CSS/CORE/profile_nav.css
• Ui-12. Current big community navigation/CSS/CORE/site_nav.css
• Ui-13. Loading/CSS/lib/loading.css

2. File introduction can be introduced through external or Inline Methods

Link and style labels should be placed in the head. In principle, style Writing on HTML is not allowed. Avoid using @ import in CSS. the nesting should not exceed one layer.

• External mode: <LINK rel = "stylesheet" href = "..." /> (The type declaration type = "text/CSS" can be omitted)
• Inline mode: <style>... </Style> (type declaration type = "text/CSS" can be omitted)

3. file name, file encoding, and file size

• The file name must contain lowercase letters, numbers, and dashes.
• The file must be encoded in UTF-8, using UTF-8 (not BOM), specifying UTF-8 encoding in HTML, and not particularly specifying in CSS because the default is UTF-8.
• Avoid too large a single CSS file (less than 300 rows are recommended)

Ii. annotation specifications

1. Comment on the top of the file (recommended)

CSS Code

1. /*
2. * @ Description: Chinese description
3. * @ Author: Name
4. * @ Update: Name (2013-04-13 18:32)
5. */

2. Module comment

The module comment must be written in a single line

CSS code

1. /* Module: module1 by Zhang San */
2. ...
3. /* Module: module2 by Zhang San */

3. Single line comment and multi-line comment

A single-line comment can be written in a single line or at the end of a line. Each line in the comment cannot exceed 40 Chinese characters or 80 English characters.

CSS code

1. /* This is a short comment */

Multi-line comments must be written in a separate row

CSS code

1. /*
2. * This is comment line1.
3. * This is comment line2.
4. */

4. Special notes

Used to mark changes, to-do lists, and other information

CSS code

1. /* Todo: XXXX by name2013-04-13 18:32*/
2. /* Bugfix: XXXX by name2012-04-13 18:32*/

5. Block comment

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

CSS code

1. /* Header */
2. /* Footer */
3. /* Gallery */

Iii. Naming rules

Use meaningful or common IDs and class names: the names of IDs and classes should reflect the functions of the element or use a common name, rather than abstract obscure names. Reflect the use of elements
The purpose is the first choice. A general name indicates that the element has no specific meaning and is similar to the element of the same level. It is usually used for auxiliary naming; the use of functional or general names can be more suitable for document or template changes.

• /* Not recommended: meaningless */# yee-1901 {}
• /* Not recommended: style related */. Button-green {}. Clear {}
• /* Recommendation: Special */# gallery {}# login {}. video {}
• /* Recommendation: versatility */. aux {}. Alt {}

Frequently used names (multiple records and multiple 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 name of ID and class, the better, as long as it is sufficient to express its meaning. This helps both understanding and code efficiency.

• /* Not recommended */# navigation {}. Recognition {}
• /* Recommended */# nav {}. Author {}

The Type selector avoids the use of tags, IDs, and classes as the positioning element selector. In terms of performance, the hierarchy of the selector should be minimized.

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

Notes for naming:

• In the naming rules, uppercase letters or _
• Naming should avoid Chinese pinyin and use more concise and semantic English words for Combination
• For more information about naming conventions, see common CSS naming rules.
• Names with numbers 1, 2, and 3 are not allowed.
• Avoid duplicate class and ID names
• ID is used to identify a parent container area of a module or page. The name must be unique and do not create an ID at will.
• Class is used to identify an object of a certain type. The name must be concise.
• Improve code module reuse as much as possible, and try to combine styles
• The rule name should not contain colors (Red/blue), positioning (left/right), and other information related to the specific display effect. The name should be meaningful, rather than the style display result name.

1. Name of common IDs:

(1) Page Structure

• Container: Container
• Header: Header
• Content: content/Container
• Page subject: Main
• Footer: footer
• Navigation: nav
• Sidebar: sidebar
• Column: Column
• Overall Layout width of the page peripheral control: wrapper
• Left right center

(2) Navigation

• Navigation: nav
• Main navigation: mainbav
• Subnavigation: subnav
• Top navigation: topnav
• Side navigation: sidebar
• Left Navigation: leftsidebar
• Right navigation: rightsidebar
• Menu: Menu
• Sub menu: submenu
• Title: Title
• Abstract: Summary

(3) Functions

• Logo: logo
• Advertisement: banner
• Login: Login
• Logon entry: loginbar
• Registration: regsiter
• Search: Search
• Functional Area: Shop
• Title: Title
• Join: joinus
• Status: Status
• Button: BTN
• Scroll: Scroll
• Tab: Tab
• ArticleList: List
• Message: msg
• Current: Current
• TIPS: Tips
• Icon: icon
• Note: Note
• Guide: Guild
• Service: Service
• Hotspot: hot
• News: News
• Download: Download
• Vote: Vote
• Partner: Partner
• Link
• Copyright: Copyright

2. Name of common classes:

(1) color: use the color name or hexadecimal code, such

• . Red {color: red ;}
• . F60 {color: # f60 ;}
• . Ff8600 {color: # ff8600 ;}

(2) font size: Use "font + font size" as the name, as shown in figure

• . Font12px {font-size: 12px ;}
• . Font9pt {font-size: 9pt ;}

(3) alignment style. Use the English name of the alignment target, as shown in figure

• . Left {float: Left ;}
• . Bottom {float: bottom ;}

(4) use the "category + function" method to name the title bar style, as shown in figure

• . Barnews {}
• . Barproduct {}

Iv. Writing specifications

1. Typographical specifications

(1) Use four spaces instead of tabs or mix spaces and tabs as indentation;

(2) The rule can be written as a single line or multiple lines, but the rule layout in the entire file must be unified;

Typographical constraints of the single-line writing style:

• If inline CSS is written in HTML, it must be written as a single line;
• Braces of each rule {plus and minus spaces;
• Braces ending with each rule} are prefixed with spaces;
• No space is added before the attribute name colon, and a space is added after the colon;
• A semicolon must be added after each attribute value, followed by a space;
• If multiple selectors share one style set, multiple selectors must be written as multiple rows;

Typographical constraints of the multi-row writing style:

• Braces for each rule {Add spaces before;
• If multiple selectors share one style set, multiple selectors must be written as multiple rows;
• Braces ending with each rule} must be aligned with the first character of the rule selector;
• No space is added before the attribute name colon, and a space is added after the colon;
• Add a semicolon after the property value;

2. Attribute writing order

• Display attribute: Display/list-style/position/float/clear...
• Attributes (Box Model): width/height/margin/padding/border
• Background: Background
• Row Height: Line-height
• Text attributes: color/font/Text-decoration/Text-align/Text-indent/vertical-align/white-space/content...
• Others: cursor/Z-index/zoom/Overflow
• Css3 attributes: Transform/transition/animation/box-shadow/border-radius
• If you use the css3 attribute and add a browser prefix if necessary, add it in the order of-WebKit-/-moz-/-MS-/-o-/STD, the standard attributes are written at the end.
• Add the link style strictly in the following order: A: Link-> A: visited-> A: hover-> A: Active

3. Rule writing specifications

• Single quotation marks are used. Double quotation marks are not allowed;
• Each declaration should end with a semicolon, whether or not it is the last statement;
• Except for hexadecimal color and font settings, all codes in the CSS file should be in lower case;
• In addition to Resetting the default style of the browser, do not add CSS style settings for HTML tags directly;
• Each rule should ensure that the selector is unique. Do not set attributes for the Global. Nav/. Header/. Body class;

4. Code Performance Optimization

• Combine settings of-left/-top/-Right/-bottom of margin, padding, and border to use short names as much as possible.
• The selector should be as short as possible on the basis of satisfying the function, reducing selector nesting and query consumption. However, do not overwrite the global style settings.
• Note the performance of the selector. Do not use a low-performance selector.
• Do not use the * selector in CSS.
• Unless required. Otherwise, there is generally a class or ID, and you do not need to write the tag corresponding to the element.
• No unit is required after 0. For example, 0 PX can be omitted to 0, and 0.8px can be omitted to. 8px.
• If it is in hexadecimal notation, the color value should be capitalized.
• If possible, the color should be represented by three characters. For example, # aabbcc is written as # ABC.
• If there is no border, do not write it as border: 0. It should be written as border: none.
• Avoid using alphaimageloader whenever possible.
• When code decoupling is maintained, try to merge repeated styles as much as possible.
• Background, Font, and other attributes that can be abbreviated. Try to use the abbreviated form.

5. Use of CSS hack

Please use the browser detection and CSS hacks without moving. Try other solutions first! Considering the code efficiency and ease of management, although these two methods can quickly solve the differences in browser resolution, they should be regarded as the final means. In a long-term project, allowing hack only brings more hack. The more you use it, the more dependent you are on it!

We recommend the following:

6. Font rules

• To prevent problems caused by file merging and encoding conversion, we recommend that you change the style Chinese font name to the corresponding English name, for example, simhei (simhei), simsun (simsun), Microsoft yahei (Microsoft yahei, quotation marks are required for words with spaces in the middle)
• The font width uses a specific value. The bold value is 700, and the normal value is 400.
• The font-size must be in PX or PT units. We recommend that you use PX (Note: PT is the font size of the printed version ), XX-small/X-small/medium/large/X-large/XX-large values are not allowed
• In order to unify the font-family values and better support the compatibility of various browsers on each operating system, font-family cannot be set freely in the Business Code.

V. test specifications

1. Understand the support for browser Special Effects

For the sake of page performance, if the browser does not support CSS 3 related attributes, some special effects of the browser will not be supported. The following table lists the supported attributes (Y is supported, N is not supported ):

2. Set browser support standards

• A-Requirements for full interaction and Visual Design
• Level B-visual differences are allowed, but the overall page effect is not damaged
• Level C-design details can be ignored, but they are not blocked

3. Common style testing tools

• W3C 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/

Vi. Other Specifications

• Do not modify the full-site CSS and general CSS libraries easily. After the changes, they must be thoroughly tested.
• Avoid using filter
• Avoid using expression in CSS
• Avoid tiled background images that are too small.
• Try not to use it in CSS! Important
• Do not use the "*" selector in CSS.
• The level (Z-index) must be clear and clear. the pop-up window and bubble on the page are at the highest level (the highest level is 999), and the bubbles in different pop-up windows can be adjusted between three digits; the normal block is a multiple of 10 in the 10-90 period. The expanded block and pop-up block increase the number of digits at the current parent level. Blind comparison between levels is prohibited.
• Use sprite technology as much as possible to reduce HTTP requests. Considering collaborative development by multiple people, Sprite can be divided by module, business, and page.