This article has collated various CSS specifications in Web front-end development, including document specification, annotation specification, naming specification, writing specification, test specification, etc.
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 categories: general-purpose classes 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: Chinese description
- * @author: Name
- * @update: Name (2013-04-13-18:32)
- */
Copy code 2, module comments
- /* Module:module1 by Zhang San */
- ...
- /* Module:module2 by Zhang San */
Copy code module comments must be written separately on one line
3. Single-line comment and multiline comment
/* A short comment */single-line comment can be written on a single line or at the end of a line, with a length of no more than 40 kanji or 80 English characters in the note. /*
* This was Comment line 1.
* This was Comment line 2.
* * Multi-line comments must be written in separate lines
4. Special Notes
/* Todo:xxxx by name 2013-04-13 18:32 *//* bugfix:xxxx by name 2012-04-13 18:32 * * For labeling changes, pending information
5. Block annotations
- /* Header */
- /* Footer */
- /* Gallery */
Copy the code to a code block comment (optional), place the style statement into the block 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:
- In rule naming, lowercase and underlined are used, and uppercase letters or _ are not allowed.
- Names avoid using Chinese pinyin and should be combined with more concise and semantic English words
- Naming note abbreviations, but not blindly abbreviated, see Common CSS naming conventions
- Not allowed to be named by serial numbers 1, 2, 3, etc.
- Avoid class and ID names
- ID is used to identify a parent container area of a module or page, and the name must be unique, not arbitrarily new ID
- Class is used to identify an object of a certain type, and the name must be concise.
- To maximize the reuse of code modules, style as much as possible in a combination of ways
- 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, the typesetting specification (1) uses 4 spaces, but does not use the tab or mixes the space +tab as the Indentation, (2) The rule may write a single line, or many lines, but the entire document the rule layout must unify; the typesetting constraints of the single-line writing style
- 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
- Display Properties: Display/list-style/position/float/clear ...
- Self attribute (box model): Width/height/margin/padding/border
- Background: Background
- Row Height: line-height
- Text properties: Color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content ...
- Others: Cursor/z-index/zoom/overflow
- CSS3 Properties: Transform/transition/animation/box-shadow/border-radius
- 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.
- The style of the link is added in the following order: A:active, A:hover, a:visited, A:link
3. Rules writing Code
- Using single quotes, double quotes are not allowed;
- Each declaration should be terminated with a semicolon, whether or not the last declaration;
- All code in the CSS file should be lowercase except for the 16 binary color and font settings;
- In addition to resetting the default browser style, you are prohibited from adding CSS styling to HTML tags directly;
- Each rule should ensure that selectors are unique and prohibit direct-to-global. Nav/.header/.body class setting properties;
4, Code performance optimization
- Combine the-left/-top/-right/-bottom settings of margin, padding, border, and use the short name as much as possible.
- 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.
- Note the performance of the selector and do not use a low-performance selector.
- Suppresses the use of the * selector in CSS.
- Unless necessary, otherwise, there is usually a class or ID, do not need to write the tag corresponding to the element.
- 0 does not need units, such as 0px can be omitted into 0,0.8px can be omitted. 8px.
- If the color is 16 binary, the color value should be capitalized.
- If you can, color as far as possible with three-bit characters, such as #aabbcc written #abc.
- If there is no border, do not write border:0, should be written border:none.
- Try to avoid using AlphaImageLoader.
- Try to merge duplicate styles as much as possible while keeping the code decoupled.
- 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:
<ignore_js_op>[/url]
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, to understand the browser effect support for page performance considerations, if the browser does not support CSS3 related properties, the browser will not support some of the effects are no longer supported, the support of the property as shown in the following table (Y is supported, n is not supported):<ignore_js_op>
2. Set the browser support standard
<ignore_js_op>
- 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 naming conventions Daquan
