The CSS that has been written for so long, but most of the front-end ER did not follow a good CSS writing code to write CSS, which will affect the reading experience of the code, here I summarize a CSS writing specifications, CSS writing order for everyone's reference, these are referred to some foreign articles and my personal experience summed up, I think it is worth learning for the front-end users who write CSS.
CSS Writing Order
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. Other (animation, transition, etc.)
CSS Writing specification
Use CSS abbreviation properties
CSS Some attributes can be abbreviated, such as Padding,margin,font and so on, so that the streamlining of code at the same time improve the user's reading experience.
Remove the "0″" before the decimal point
Abbreviated name
Many users like shorthand class name, but the premise is to let people understand your name can be abbreviated Oh!
16 Binary color code abbreviation
Some color code can be abbreviated, we will try to abbreviate it, improve the user experience primarily.
Hyphen CSS Selector naming specification
1. Long names or phrases can be named for selectors using the middle horizontal line.
2. It is not recommended to use the "_" Underline to name the CSS selector, why?
Press one SHIFT key less when typing;
Browser compatibility issues (such as naming using _tips selectors, which are not valid in IE6)
Good at distinguishing javascript variable naming (JS variable name is with "_")
Here is a detailed discussion of dashes and underscores, English: Click to view the Chinese text: Click to view
Do not use the ID arbitrarily
ID in JS is unique, can not be used many times, and the use of class classes selector can be reused, the other ID priority and class, so the ID should be used on demand, and can not be abused.
Add a status prefix to the selector
Sometimes you can add a prefix for the state to the selector to make the semantics clearer, such as the ". is-" prefix that is added to the following image.
CSS naming conventions (rules)
Common CSS naming rules
Header: Header
Content: Content/container
Tail: Footer
Navigation: Nav
Sidebar: Sidebar
Column: Column
Page perimeter control overall layout width: Wrapper
Left Right Center
Login Bar: Loginbar
Logo: Logo
Advertisement: Banner
Page body: Main
Hotspot: Hot
News
Download: Download
Sub-navigation: Subnav
Menus: Menu
Sub-menu: submenu
Search on: Search
Friendship Link: friendlink
Footer: Footer
Copyrights: Copyright
Scrolling: Scroll
Contents: Content
Article listing: List
Tip Message: Msg
Tips: Tips
Column Title: Title
Add: Joinus
Guide: Guide
Services: Service
Registration: Regsiter
State: Status
Vote: Vote
PARTNER: Partner
The wording of the annotation:
/* Header * *
Content Area
/* End Header * *
Name of ID:
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
Left Right Center
(2) Navigation
Navigation: Nav
Main navigation: Mainnav
Sub-navigation: Subnav
Top Navigation: Topnav
Edge Navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Menus: Menu
Sub-menu: submenu
Titles: Title
Summary: summary
(3) function
Logo: Logo
Advertisement: Banner
Login: Login
Login Bar: Loginbar
Register: Register
Search on: Search
Functional area: Shop
Titles: Title
Add: Joinus
State: Status
Button: BTN
Scrolling: Scroll
Tag page: tab
Article listing: List
Tip Message: Msg
Currently: current
Tips: Tips
Icons: Icon
NOTES: note
Guide: Guild
Services: Service
Hotspot: Hot
News
Download: Download
Vote: Vote
PARTNER: Partner
Links: Link
Copyrights: Copyright
Precautions::
1. All lowercase;
2. Use English as much as possible;
3. Do not add medium lever and underline;
4. Try not to abbreviate, unless a look at the words understood.
CSS style sheet file naming
The main master.css
Module MODULE.CSS
Basic shared Base.css
Layout and Layout layout.css
Theme Themes.css
Column Columns.css
Text Font.css
Form Forms.css
Patch Mend.css
Print Print.css