9 standard best practices for front-end code: CSS and css

9 standard best practices for front-end code: CSS and css

Front-end engineers pay high attention to writing standard front-end code. These best standard practices are not published by the authoritative organization, but are summarized by a large number of front-end engineers in their experience in the practice process to improve code readability, maintainability, and performance. Next, let's talk about some standard practices of CSS code in the previous article.

 

1. Name

Like other language specifications, css naming should also be meaningful, and naming should be as short as possible but adequate to express meaning; the names of words should be connected by hyphens.

Nonstandard naming:

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

Standard naming:

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

2. css Selector

Do not use the same css class name for different tag types. Do not use the tag type selector as much as possible. Use the css class name and ID to define css, because ID can uniquely determine Dom elements, css classes are not recommended for different tags. In addition, the ID selector should be used less, because the uniqueness of IDS makes the defined css unusable.

Non-standard definition:

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

Standardized Definition:

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

3. simplified definition of attribute names and values

Some attribute definitions of css can be split into independent items, such as padding, border, margin, background, and font. Although the definition of splitting is easier to read, the current experience shows that, front-end engineers have a good understanding of these commonly used css, And the merged definition does not affect readability, but the code is more concise. In addition, the Unit with a property value of 0 can be omitted, adding px em cm and other units after 0 is meaningless. For a small value, the 0 before the decimal point can be omitted, and the quotation marks at both ends of the url value can be omitted.

Non-standard definition:

Standardized 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;

 

4. css code format

The beautiful and unified code format can improve the readability and maintainability of the Code. The best css code format mainly includes the following: The definition order is arranged in alphabetical order, regardless of the browser prefix; The definition ends with a semicolon; add a space after the semicolon of the attribute name definition. When multiple selector definitions exist, each definition occupies a single line.

1/* the css definition order is arranged in alphabetical order; a semicolon is used to end the process; a space is added between the attribute 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 11/* http://www.cnblogs.com/sosoft/ */12/* when multiple selectors are defined, each selector occupies a single row */13 h1, 14 h2, 15 h3 {16 font-weight: normal; 17 line-height: 1.2; 18}

5. Avoid writing css code compatible with a browser.

To avoid writing compatible code for a specific browser, the specific browser here mainly refers to the Internet Explorer series, IE6, and 7, which are particularly serious. When encountering browser compatibility problems, the first thing to consider is whether we can change to another solution. If there is no suitable solution, remember to write a css file separately for these specific browsers, do not mix compatible code with conventional Code to facilitate code maintenance. If these old browsers are not supported in the future, you can directly Delete these individual css files.

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 differences between block elements and intra-row elements to avoid useless css code writing.

The display of block-level elements excludes one row, but the element in the row does not excludes one row. Common block-level elements include: div p ul ol table h1 ~ H6, etc.; row elements include a em img input label select span strong textarea. The default display style of block-level elements is block, while the line element is inline. You can redefine display to convert block-level elements and line-level elements. However, remember that the following css styles are invalid for the row elements: width height and the margin padding set in the vertical direction, so avoid defining these useless styles for the row elements.

7. Remember the weight defined by css.

The css selector has a weight. When there are multiple styles, the style with a high weight will take effect. Speaking of an episode, I interviewed a lot of front-end engineers some time ago. One of the most asked questions was the question of css weight. Unfortunately, I don't know much about css weight. The following is a weight rule: the label weight is 1, the class weight is 10, and the id weight is 100. The following example shows the weights of various definitions:

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

If the weights are the same, the final style will work, but this situation should be avoided, because it is unreliable to affect the final style by relying on the style definitions, it will also bury a minefield for later maintenance. In addition, to reuse the code, we should define a minimum weight as much as possible, which is the same as not recommended to use id to define the style.

8. Use css reset

The tags file to redefine the default styles of various labels. In addition, the recommended css file organization is: Define a base.css for css reset, define a common.css, and define various public css classes. Here is a combination of base.css and common.css, which we will share with you: base.css

9. Multiple combinations and less inheritance

This design method 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 in the css definition so that the code can be reused to the maximum extent. As a result, the number of css classes added to the element is increased, but it improves the maintainability and readability of the Code. The following sample code comes from the bootstrap button style definition:

The button has a fixed basic 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;11   ...12   *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);15           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 of 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 13 .btn-large {14   padding: 9px 14px;15   font-size: 15px;16   line-height: normal;17   -webkit-border-radius: 5px;18      -moz-border-radius: 5px;19           border-radius: 5px;20 }21 22 .btn-large [class^="icon-"] {23   margin-top: 1px;24 }25 26 .btn-small {27   padding: 5px 9px;28   font-size: 11px;29   line-height: 16px;30 }31 32 .btn-small [class^="icon-"] {33   margin-top: -1px;34 }35 36 .btn-mini {37   padding: 2px 6px;38   font-size: 11px;39   line-height: 14px;40 }

In addition, we recommend the bootstrap framework, the top-end framework in github, from twitter.