Personal CSS Writing specification

Preface: Recently in the small program, because the company small, I am a person to get the front end of things, JS and the page is I to get, the results that day backstage people see my JS code, said my code is not standard, function what are messy, make me ashamed, thanks to not see my CSS, in fact, my CSS name is also very casual ==! Always feel that they can still be CSS, but suddenly found themselves to the current CSS is not very standard, many names are also very casual, some places with the hump named, and some with the cross bar, some will also use the underline, really too casual, so on the Internet searched the search naming norms, Changed to two days finally changed the style of all over. So make a summary:

Meaning: The sense of normative CSS code is very meaningful, a set of their own specifications in the future when the CSS can save a lot of how to name the time, from the long-term point of view or very good, and then others look at your CSS can be a glance to know what it means, Finally can be installed B, haha.

Specification: In fact, I am directly Baidu "CSS code Specification", and then on the search for a lot of information, see the person recommended NetEase 1 A set of front-end specifications, and then look at it is really good, based on it to organize their own CSS coding specifications.

Classification and naming:

First, broadly divided into the following major categories, respectively, G, M, U, F, S, Z, and custom X-to name a letter, indicating the role

1. Layout (grid) (. g): Splits the page into chunks, usually with head, body, main bar, sidebar, tail, etc.
2. Module (. m): Usually a larger whole that can be reused with semantics! such as navigation, login, registration, various lists, comments, search and so on!
3. Component (Unit) (. u): Usually a small, non-repeatable individual that is often reused in various modules! such as buttons, input boxes, loading, icons and so on!
4. function (. f): In order to facilitate the use of some commonly used styles, we peel these high-usage patterns, on-demand use, usually these selectors have a fixed style of performance, such as clear floating and so on! No abuse!
5. Skin (. s): If you need to pull out the skin type style, usually text color, background color (picture), border color, etc., non-skin type website usually only extracts text color! Non-skin type website can not abuse this kind!
6. Status (. z): Prefix the State class style

PS: Why use hyphens or some discussion: underscores and hyphens in CSS style names

Second, selector attributes and attribute values are all lowercase

Each property value is followed by a semicolon ending, even if the last

Four, the ellipsis value is 0 o'clock unit namely: 0px,0em,0%, 0

V. Use single quotation marks

VI. Use 16 binary to represent color (except transparency with RGBA)

Vii. spacing between attributes and values with a half-width space

Eight, writing order 2:

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.)

PS: Actually this inside of height and line-heightde position I am very tangled, because in fact many times I are directly omit height directly with line-height to prop up the height, oneself actually still did not understand line-height this attribute, Need to pay attention to study!!

Nine, Other:

Generally write CSS when you need to reset some browser default CSS, here is an optimized reading experience of the article, but also, the inside of the #000 black color into #333 this little trick many sites are in use, and I do not care, so specifically to remember.

Abbreviations: In fact, I am rewriting my css when many times I have been thinking about how to abbreviate those words, although netease front-end specification also wrote some abbreviations, but very few, just find an article, you can check here, really can't find on Baidu go to it. Common abbreviations: http://blog.csdn.net/yfh1985sdq/article/details/17260429

Reference Address:

1 NetEase front-end specification: http://www.shejidaren.com/css-written-specifications.html

2 CSS Writing order discussion: http://www.cnblogs.com/wybie/p/3689867.html

3 CSS Writing specifications, there are examples, the interface is also very good-looking, I basically refer to the site of the NetEase front-end specification: http://nec.netease.com/standard/css-practice.html

Finally, the blog is very tired,,, really admire the online those big God, can write so concise, but also humorous and funny, really let people envy ah, yes, I said is Zhang Xin Xu Zhang Big god, ren heavy and way far ah ~

Personal CSS Writing specification