Front-end Code 9 standard best Practices: CSS

Front-end engineers have a high degree of emphasis on writing standard front-end code. These best practices are not published by the authoritative organization, but are summarized by a large number of front-end engineers in their practice, with the aim of improving the readability, maintainability and performance of the code. So then, let's talk about some of the standard practices of CSS code.

1, naming

As with other language specifications, the name of the CSS should be named to make sense, the name should be as short as possible but enough to express meaning; the named word is concatenated with hyphens.

Non-canonical naming:

1 #navigation {2}3. demoimage{4}5. error_status{6}

Name of the specification:

1 #nav {2}3. demo-image{4}5. error-status{6}

2, CSS Selector

The different tag types do not have the same CSS class name as possible, as far as possible without the tag type selector, CSS class name and ID are sufficient to define CSS, because the ID is uniquely determined DOM elements, and CSS classes are not recommended for different labels; Because the uniqueness of the ID makes the defined CSS unusable.

Non-canonical definition:

1 ul#menus{2}3 Div.info{4}

Specification Definition:

1. Main-menus{2}3. info{4}

3, definition of attribute name and value refinement

Some of the property definitions of CSS can be split into individual items, such as padding,border, margin, background, font, etc., although the definition of spin-offs will be better readable, but in the present experience, Front-end engineers have good understanding of these commonly used CSS, the merged definition will not affect the readability, but the code is more concise, in addition to the property value of 0 units can be omitted, after 0 added px em cm and other units is meaningless, the decimal value can be omitted before the 0 ; The quotation marks at both ends of the URL value can be omitted.

Non-canonical definition:

Specification Definition:

border-top:0;font:100%/1.6 Palatino, Georgia, serif;padding:0 1em 2em;margin:. 8em;background: #00FF00 URL (bgimage.gif ) no-repeat fixed top;

Format of the 4,CSS code

Beautiful Unified code format can improve the readability and maintainability of the Code, CSS, the best code format is mainly the following: the definition sequence in alphabetical order, regardless of browser prefix; the definition ends with a semicolon; a semicolon after the attribute name definition adds a space, and when multiple selectors are defined, each defines a single row.

1/*css the sequence of definitions in alphabetical order; end with a semicolon; add a space between the property name and the value */2 Background:fuchsia; 3 border:1px solid; 4-moz-border-radius:4px; 5-webkit-border-radius:4px; 6 border-radius:4px; 7 Color:black; 8 Text-align:center; 9 text-indent:2em;10/* http://www.cnblogs.com/sosoft/*/12/* Multiple selectors defined, each selector occupies a single row */13 h1,14 h2,15 h3 {     Font-we Ight:normal;17     line-height:1.2;18}

5. Avoid writing CSS code that is compatible with a browser

Avoid writing specific browser-compatible code, which is said to be a specific browser refers to the evil IE series browser, ie6,7 particularly serious. Encounter browser compatibility issues, the first consideration is whether you can change a different solution, if there is no suitable solution, remember to write a CSS file to these specific browsers, do not mix compatible code and regular code, so that the maintenance of code, if later do not support these old browser, You can delete these individual CSS files directly.

1 <!--[if IE 6]>2 <link rel= "stylesheet" type= "Text/css" href= "Css/ie6.css"/>3 <! [Endif]-->4 <!--[if IE 7]>5 <link rel= "stylesheet" type= "Text/css" href= "Css/ie7.css"/>6 <! [endif]-->

6, remember the difference between block element and inline element, avoid writing useless CSS code

Block-level elements display exclusive lines, while inline elements do not have a single row. Common block-level elements are: DIV P ul ol table H1~H6, etc., the inline elements are: A EM img input label select span Strong textarea and so on. The display default style for block-level elements is block, and inline elements, which can be re-defined by the display to each other, block-level elements and inline elements. But keep in mind that the following CSS styles are not valid for inline elements: width height and margin padding are set vertically, so avoid defining these useless styles for inline elements.

7. Remember the weights of CSS definitions

CSS selectors are weighted, and when there are multiple styles, the high-weight style works. Say an episode, the previous time interview a lot of front-end engineers, asked most of a problem is the CSS weight problem, it is a pity to know that the CSS weight is not much. The following is the rule of weight: the weight of the label is 1,class weight of 10,id is 100, the following example shows the weight values of various definitions:

1/* weight is 1*/2 div{3} 4//Weight is 10*/5. class1{6} 7/* Weight 100*/8 #id1 {9}10 */weight 100+1=101*/11 #id1 div{12}13//Weight 10+1=1 1*/14. Class1 div{15}16/* weights 10+10+1=21*/17. Class1. Class2 div{18}

If the weights are the same, the last defined style will work, but this should be avoided, since it is not reliable to influence the final style by the style definition of the front and back, but also to bury a minefield for later maintenance, and for the reuse of code, you should define small weights as much as possible. This is the same as not recommending the use of IDs to define styles.

8, use CSS Reset

Each browser has its own different built-in style for different tags, so you can define a separate base.css file to redefine the default styles for each label in order to make the label behave the same in different browsers. Another recommended CSS file organization is: Define a base.css for CSS reset, define a COMMON.CSS that defines a variety of common CSS classes. Here is a copy of the BASE.CSS, in fact, the above mentioned Base.css and Common.css merger, share to everyone: base.css

9, multiple combinations less inheritance

This style of design is becoming more and more popular, and a large number of such designs can be seen in various front-end frameworks. The core idea of the design is to separate the fixed and variable parts of the CSS definition, and to maximize the reuse of the code, which increases the number of CSS classes added to the element, but improves the maintainability and readability of the code. The following example code comes from the Bootstrap button style definition

The button has a fixed base style btn

1. btn {2   display:inline-block; 3   *display:inline; 4   padding:4px 10px 4px; 5   margin-bottom:0; 6   * Margin-left:. 3em; 7   font-size:13px; 8   line-height:18px; 9   *line-height:20px;10   color: #333333;   *zoom:1;13   -webkit-box-shadow:inset 0 1px 0 rgba (255, 255, 255, 0.2), 0 1px 2px rgba (0, 0, 0, 0.05); 14
   
    -moz-box-shadow:inset 0 1px 0 rgba (255, 255, 255, 0.2), 0 1px 2px rgba (0, 0, 0, 0.05);           Box-shadow:inset 0 1px 0 RGBA (255, 255, 255, 0.2), 0 1px 2px rgba (0, 0, 0, 0.05); 16}
   

Define specific styles for various buttons on this basis

1. btn.disabled, 2. btn[disabled] {3   cursor:default; 4   background-color: #e6e6e6; 5   Background-image:none ; 6   opacity:0.65; 7   Filter:alpha (opacity=65); 8   -webkit-box-shadow:none; 9      -moz-box-shadow:none;10           box-shadow:none;11}12 btn-large {   padding:9px 14px;15 font-size:15px;16   line-height:normal   ;   -webkit-border-radius:5px;18      -moz-border-radius:5px;19           border-radius:5px;20}21. Btn-large [ Class^= "icon-"] {   margin-top:1px;24}25. btn-small {padding:5px 9px;28 font-size:11px;29   line-height:16px;30}31 Btn-small [class^= "icon-"] {margin-top   : -1px;34}35. btn-mini {PNS Padd   ing:2px 6px;38   font-size:11px;39   line-height:14px;40}

Another recommended bootstrap framework, the first front-end frame in GitHub, comes from Twitter.

Front-end Code 9 standard best Practices: CSS