Good habits of CSS

 1. Some background images used on the page. If they are small images, they should be merged into an image and then set the background image position through background-position.

     The benefits of doing so are:

A. The size of an image is smaller than that of many scattered images.

               
B. In this way, the image can be loaded at a time. For example, if two images are used when the buttons are normal and the hover status, during the hover process, there is obviously a blank space before switching the image, which cannot meet our requirements. However, if you synthesize an image, you won't have this problem through background-position.

                C. If multiple CSS styles use merged images, put them together to set their background images. For example, div1, div2 {Background: URL (..), no-Repeat;} IE6 does not cache images. This avoids re-loading the same image every time you read a style.

The main benefit is: Reduce the number of communications between the browser and the server

 

  2. When writing CSS styles, it is best to write them in the following order:

(Display | list-style | position | float | clear and other display attributes)->

(Width | height | margin | padding | border | attributes such as background and the box model style)->

(Color | Line-height | font | text-decoration | text-align | vertical-align | white-space | Other | text | content and other text attributes)
.

    Of course, it does not mean that you have to write in this order, but this method can make the CSS structure clearer and easier to read and modify. In addition, it can improve efficiency in team projects.

 
PS: This method is recommended by Mozilla engineers. It first writes display attributes, then its own attributes, and then the text attributes, which makes the CSS structure clearer and easier to read and modify. In addition, the rendering performance is also good.

Source: original