CSS naming and writing rules summary

The company is using less to dynamically compile css, but in writing css, still need to follow some rules.

1 position attributes (position, top, right, z-index, display, float, etc.) 2 size (width, height, padding, margin) 3 Text series (font, line-height, letter-spacing, color-text-align, etc.) 4 background (background, border, etc.) 5 Others (animation, transition, etc.)

1 attribute Abbreviations2 Remove the 0 before the decimal point3 16 binary color code abbreviations4 5 hyphen CSS Selector naming specification6 a long name or phrase can use a middle line to name the Selector. 7 It is not recommended to use the "_" underline to name the CSS selector, why?8 　　9 Browser compatibility issues (such as naming using _tips selectors, which are not valid in IE6)Ten good to distinguish JavaScript variable name (JS variable name is "_") one  a don't feel free to use ID - ID in JS is unique, can not be used multiple times, and the use of class selector is reusable, and the priority of the ID priority and class, so the ID should be used on demand, and can not be abused.  -  the Add a status prefix to the selector -Sometimes you can add a prefix to the selector to indicate the status, making the semantics clearer.

1 head: header2Content: content/Container3 tail: Footer4 Navigation: nav5 sidebar: Sidebar6 column: Column7 page Perimeter control overall layout width: wrapper8 Middle: left Right center9 Login Strip: LoginbarTen Logo: logo one ad: Banner a page body: main - hotspot: Hot - Press: News the download: Download - sub-navigation: Subnav - menus: Menu - Sub-menu: submenu + searches: search - links: Friendlink + footer: Footer a copyrights: Copyright at scrolling: Scroll - contents: Content - tags: tags - article List: list - Hint message: msg - tip: tips in column Title: title - join: Joinus to guide: Guides + services: Service - registration: Regsiter the state: status * vote: vote $ partner : PartnerPanax Notoginseng notation : -/* Header */ the Content Area +/*EndHeader */ a name of the id: the1)page Structure + container: Container - Page Header: Header $Content: content/Container $ page body: main - page end: Footer - Navigation: nav the sidebar: Sidebar - column: ColumnWuyi page Perimeter control overall layout width: wrapper the Middle: left Right center -(2)Navigation wu Navigation: nav - main navigation: Mainnav about sub-navigation: Subnav $ Top navigation: Topnav - Side navigation: Sidebar - left Navigation: Leftsidebar - Right navigation: Rightsidebar a menus: Menu + Sub-menu: submenu the caption: title - abstract: Summary $(3)function the Logo: logo the ad: Banner the login: Login the Login Strip: Loginbar - registration: register in searches: search the Functional Area: shop the caption: title about join: Joinus the state: status the button: btn the scrolling: Scroll + Tags page: tab - article List: list the Hint message: msgBayi present: Current the tip: tips the icons: icon - note: Note - Guide: Guild the services: Service the hotspot: Hot the Press: News the download: Download - vote: vote the partner : Partner the links: link the copyrights: Copyright94Precautions:: the1. lowercase; the2. Try to use english; the3. Do not add the lever and underline;984.try not to abbreviate unless you see the words clearly.  about CSS style sheet file naming -The primary master.CSS101Modular Module.CSS102Basic Common Base.CSS103layouts, Layout Layout.CSS104Theme Themes.CSS theColumn Columns.CSS106Text Font.CSS107Forms Form Forms.CSS108Patch Mend.CSS109PrintPrint. css

CSS naming and writing rules summary