Best practices for front-end code standards: CSS

After the previous article "Best Practices for front-end code standards: javascript" was published, we were very enthusiastic about it. It reflected that front-end engineers paid great 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:

#navigation{}.demoimage{}.error_status{}

Standard naming:

#nav{}.demo-image{}.error-status{}

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:

ul#menus{}div.info{}

Standardized Definition:

 

.main-menus{}.info{}

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:

border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0;margin: 0.8em;background: #00FF00 url('bgimage.gif') no-repeat fixed top;

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.

/* Css is defined in alphabetical order. Semicolons are used to end the process. spaces are added between attribute names and values. */background: fuchsia; border: 1px solid;-moz-border-radius: 4px;-webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em; /* when multiple selectors are defined, each selector occupies a single line */h1, h2, h3 {font-weight: normal; line-height: 1.2 ;}

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.

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" /><![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:

/* The weight is 1 */div {}/* the weight is 10 */. class1 {}/* weight: 100 */# id1 {}/* weight: 100 + 1 = 101 */# id1 div {}/* weight: 10 + 1 = 11 * /. class1 div {}/* weight: 10 + 10 + 1 = 21 */. class1. class2 div {}

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

.btn {  display: inline-block;  *display: inline;  padding: 4px 10px 4px;  margin-bottom: 0;  *margin-left: .3em;  font-size: 13px;  line-height: 18px;  *line-height: 20px;  color: #333333;  ...  *zoom: 1;  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);     -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);}

Define specific styles of various buttons on this basis

.btn.disabled,.btn[disabled] {  cursor: default;  background-color: #e6e6e6;  background-image: none;  opacity: 0.65;  filter: alpha(opacity=65);  -webkit-box-shadow: none;     -moz-box-shadow: none;          box-shadow: none;}.btn-large {  padding: 9px 14px;  font-size: 15px;  line-height: normal;  -webkit-border-radius: 5px;     -moz-border-radius: 5px;          border-radius: 5px;}.btn-large [class^="icon-"] {  margin-top: 1px;}.btn-small {  padding: 5px 9px;  font-size: 11px;  line-height: 16px;}.btn-small [class^="icon-"] {  margin-top: -1px;}.btn-mini {  padding: 2px 6px;  font-size: 11px;  line-height: 14px;}

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

10. sprite)

This technique combines multiple background images into one, and then displays different backgrounds by setting different background-position attributes. More and more websites are using this technology, such as Amazon, Apple, Google, and YouTube. Our current project MSB also partially uses this technology. The advantage is to reduce the number of http request background images and reduce the pressure on the server. The page background images can appear at the same time to avoid blank background. The disadvantage is that it is not easy to maintain. In addition, the results of some experiments will slightly affect the rendering speed. Because the position is to be calculated, the advantage is greater than the disadvantage, especially when there are many background images on the website. There are also multiple tools to help us automatically merge the background image and generate the corresponding background-position.

Http://spritegen.website-performance.org/

Http://csssprites.com/

Http://drupal.org/project/sprites

In addition, if you are using asp.net to develop websites, you can use a Microsoft open-source tool to generate the corresponding css srite at runtime.

For more information, see generate css sprites in asp. NET.

 

The above is what I think is more important in CSS standard practices. They focus on css standard practices as a whole. In fact, there are still many best practices in css, which need to be discussed in detail, at present, various engineers write a variety of css code, which is also chaotic. It is also related to the ease of getting started with css code and the variety of implementation methods for the same effect. Regardless of the language flexibility, it is very important to develop a good habit of writing code. These need to be summarized and improved in practice. I hope this article can help the colleagues who are learning css at the beginning, there are few detours in the process of technological improvement.