A. Attribute specification
1. writing order attribute
(1) location attribute (position, top, right, z-index, display, float, etc.);
（2）大小(width, height, padding, margin)；
(3) Text Series (font, line-height, letter-spacing, color- text-align the like);
(4) Background (background, border, etc.);
(5) Other (animation, transition, etc.).
Summary: The recommendations follow the layout positioning properties -> own Properties -> Text Properties -> other attributes.
/ * Recommended order * /
.example {
position: absolute;
width: 100px;
font-size: 20px;
background-color: #ccc;
}
/ * Not recommended order * /
.example {
width: 100px;
background-color: #ccc;
position: absolute;
font-size: 20px;
}
2. Usage attribute specification
(1) indent: It is recommended to use four spaces as an indentation level.
(2) non-special little scene to make use of! Important, if you are using must add the necessary comments.
(3) attribute definition must be a separate line, and the attribute is defined by a semicolon.
(4) the selector between "{" must contain spaces; property name after the ":" between the spaces are allowed;: must contain spaces between the attribute value "."
(5) minimize the use of styles defined in a written label (e.g., an inline style: style = "color: red;"), do not use js element is added inline styles.
3. shorthand property
When the property can be abbreviated to force the use of shorthand, you can streamline the code and improve the reading experience.
(1) such as padding, margin, font, color, etc.
/ * Recommended wording * /
.example {
padding: 5px 10px;
}
/ * Not recommended wording * /
.example {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
(2) in front of the decimal point '0' recommendations removed
/ * Recommended wording * /
.example {
font-size: .8rem;
}
/ * Not recommended wording * /
.example {
font-size: 0.8rem;
}
(3) represents a hexadecimal color value
Css color value in hexadecimal can be used to represent, where possible circumstances, may be abbreviated, for example: # abf, # ccc.
4. nested rule:
(1) no more than four levels of nesting levels.
(2) In scss, less the selector can be nested, can enhance the readability and simplicity, but should be avoided without any content selector.
Should follow scss / less nesting order:
a. @extend current selector and @include
b. The current style attribute selector
. C parent selector pseudo class selector (: first-child,: active, etc.)
. D Pseudo-earth element (: before,: after)
Declarative style e. The parent selector
f. scss media queries with context
g. child selector
II. Naming Conventions
1. Name the file named
Chinese characters can not contain spaces and special characters, all in lower case, when more than one word, crossed to the division.
2. style naming
Using the corresponding style effects, words or abbreviations functions described, can not contain spaces and special characters characters.
(1) id name: camel nomenclature. Avoid using id as style controls.
(2) class named: & lowercase & Digital - (underlined) combined name.
(3) General name: besides the well-known name Abbreviation, try not to use abbreviations.
An important part of the outer layer of the page CSS style names:
Jacket: wrap
Head: header
The main contents: main
Left: main-left
Right side: main-right
Navigation bar: nav
Content: content
Bottom: footer
Commonly used CSS naming rules
Sidebar: sidebar
Column: column
Right and left: left right center
Log Article: loginbar
Logo: logo
Advertising: banner
Main page: main
Hot: hot
News: news
Download: download
Sub navigation: subnav
Menu: menu
Sub-menu: submenu
Search: search
Links: friendlink
Footer: footer
Copyright: copyright
Scroll: scroll
Content: content
Tags: tags
Article list: list
Message: msg
Tips: tips
Section title: title
Added: joinus
Guide: guide
Services: service
Registration: regsiter
Status: status
Voting: vote
Partners: partner
3. Other
(1) should be distinguished from the use of the class name for the class name js operation or other use.
(2) recommended more than 120 characters per line should not, unless the integral single row.
III. Notes Specification
1. The uniform application / ** /, with specific reference to the wording below.
2. The next line of code indentation consistent; may be at the end of a line of code, and the code interval of one space.
3.css documents must be written in the top of the comments, indicating that the file attached to the module.
4. When a rule in a number of statements, each statement should be a separate line; only one statement, the entire rule can be written as a single line.
IV. Use
Reference specification: Do not use @import, except when using less, less @import use, the need to avoid the css code generated @import
V. Pictures
1. PNG format, using monochromatic background scene, FIG Main color not more than three kinds, should save the PNG-8 encoding. In other situations, PNG-24 using saved.
2. Recommended single image volume at 10kb or less, should be considered to provide a base64 encoding with css is not provided a separate image file.