CSS specifications and css naming rules

CSS specifications and css naming rules
Previous

CSS is the description language of webpage styles. CSS specifications make CSS code styles consistent, making CSS easier to understand and maintain. This document introduces the CSS specification in detail.

 

Code style

[Selector]

1,SelectorAnd{Contains spaces.

.selector {}

2,>,+,~Each side of the selector retains a space.

/* good */main > nav{}/* bad */main>nav {}

[Attribute style]

1,Attribute nameAnd:Does not contain spaces,:AndAttribute ValueContains spaces.

margin: 0;

2. For attribute values separated by commas, a space should be inserted after each comma.

font-family: Arial, sans-serif;

3.Contains only one statementTo make it easier and easier to edit quickly, we recommend that you put the statement on the same line. For styles with multiple declarations, the declaration should be divided into multiple rows

.selector {    margin: 0;    padding: 0;}.selector { margin: 0;}

4. The last attribute value also ends with a semicolon, which reduces unnecessary errors and troubles when modifying, adding, and maintaining code.

/* good */.selector {    margin: 0;    padding: 0;}/* bad */.selector {    margin: 0;    padding: 0}

[Quotation marks]

1. text content is enclosed by double quotation marks

html[lang|="zh"] q:before {    font-family: "Microsoft YaHei", sans-serif;    content: "“";}

2,url()The path in the function is not enclosed by quotation marks.

body {background: url(bg.png);}

[Omitted]

1. For attribute values or color parameters, omit the value 0 before the decimal point smaller than 1.

panel {opacity: .8}

2. If the omitted value is 0, 0px, 0em, and 0% are abbreviated as 0 to save unnecessary bytes and make reading easier.

.m-box{margin:0 10px;background-position:50% 0;}

[Abbreviation]

1. Try to use the hexadecimal value in short format, for example#fffReplace#ffffff

2. hexadecimal values should all be in lower case, for example,#fff. When scanning documents, lowercase characters are easy to distinguish because their forms are easier to distinguish

3. When abbreviations can be used, try to use them. The biggest benefit is that it saves byte, facilitates maintenance, and makes reading clearer.

/* good */.post {    font: 12px/1.5 arial, sans-serif;}/* bad */.post {    font-family: arial, sans-serif;    font-size: 12px;    line-height: 1.5;}

[Media query]

Place the media query @ media near the relevant rules as much as possible. Do not package them in a single style file or at the bottom of the document. If they are separated, they will be more easily forgotten in the future.

.element { ... }.element-avatar { ... }.element-selected { ... }@media (min-width: 480px) {  .element { ...}  .element-avatar { ... }  .element-selected { ... }}

 

Note

[Single line comment]

Leave a space between the asterisk and the content to ensure that the style can be correctly parsed even if the encoding is incorrect.

/* Single line comment */

[Block comment]

When necessary, you can use block comments to maintain uniform indentation and alignment. The asterisks must be aligned in one column. A space is reserved between the asterisks and the content.

/*** Multi-line comment 1 * multi-line comment 2 */

[File comment]

The top part of the file must contain a file comment. The asterisk must be aligned with one column. A space is reserved between the asterisk and the content, and a space is reserved between the colon and the content.

Use @ name to identify the file description, @ author to identify the author, @ description is the file or module description, and @ update is optional. We recommend that you update each change.

/*** @ Name: file name or module name * @ description: file or module description * @ author: author-name (mail-name@qq.com) * author-name2 * @ update: */

 

Declaration Order

1. Private: first, the standard is followed, that is, the private logo of the browser is first written, and then the W3C Standard

.m-box {    -webkit-box-shadow: 0 0 0 #000;    -moz-box-shadow: 0 0 0 #000;    box-shadow: 0 0 0 #000;}

2. The relevant attribute declarations should be in the same group and arranged in the order of (layout class attributes> box model attributes> text class attributes> modifier class attributes)

The layout attribute comes first because it can break an element out of a normal text stream and overwrite the style related to the box model. The box model follows closely, because it determines the size and position of a component. Other attributes only work in the component or do not affect the results of the first two cases.

Layout class attributes position/top/right/bottom/left/float/display/overflow and other box model attributes border/margin/padding/width/height text class attributes font/line-height /text-align/word-wrap and other modifiers such as background/color/transition/list-style

In addition, ifcontentAttribute should be placed at the beginning

.sidebar {    /* formatting model */    position: absolute;    top: 50px;    left: 0;    overflow-x: hidden;    /* box model */    width: 200px;    padding: 5px;    border: 1px solid #ddd;    /* typographic */    font-size: 14px;    line-height: 20px;    /* visual */    background: #f5f5f5;    color: #333;    -webkit-transition: color 1s;       -moz-transition: color 1s;            transition: color 1s;}

 

Avoid using

1. Try not to use!importantStatement. When you need to force a style to be specified and do not allow any scenario to overwrite it, use tag inlinking!importantDefine Style

2. Avoid performance consumption attributes, such as express and filter. However, sometimes the demand is greater than everything else.

/* expression */.class {width: expression(this.width>100?'100px':'auto');}/* filter */.class {filter: alpha(opacity=50);}

3. Avoid using@import，And<link>Label,@importCommands are much slower, not only increasing the number of additional requests, but also leading to unexpected problems.

4. Avoid unnecessary nesting in sass, because although nesting can be used, it does not mean nesting should be used. Nesting is used only when the style must be restricted to the parent element (that is, the descendant selector) and multiple elements need to be nested.

5. Avoid using hack whenever possible. When the browser cannot be avoided due to its own defects, appropriate Hack can be used. Use "*" and "_" to Hack IE7 and 6 respectively.

/* IE7 will show gray #888, IE6 will show white # fff, other browsers will show Black #000 */. m-list {color: #000; * color: #888; _ color: # fff ;}