CSS Naming conventions

Header Comment

/* * @description: English description * @author: name* @update: Name (2013-04-13 18:32) */

Notes

/**//**/

Precautions

1, the rule naming, all use lowercase and underline the way, do not allow the use of capital letters or _
2, the name to avoid the use of Chinese pinyin, should adopt a more concise and semantic English words to combine
3, naming attention abbreviations, but not blindly abbreviated, see commonly used CSS naming rules
4, not allowed by the 1, 2, 3 and other serial number named
5. Avoid class and ID names
6, ID is used to identify a module or a page of a parent container area, the name must be unique, do not feel free to create new ID
7. Class is used to identify an object of a certain type, and the name must be concise.
8, as far as possible to improve the code module reuse, style as far as possible in a combination of ways
9, the rule name should not contain color (red/blue), positioning (left/right) and other information related to the specific display effect. It should be named with meaning rather than the style display result.

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;

Writing specification:

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;

Attribute Write 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

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.

Common naming:

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

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

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

CSS Naming conventions