The first two articles are about performance optimization, the whole theoretical knowledge, without any practical content, is not in line with the style of our programmers. My original intention is to optimize our code, not only in terms of performance, but also in terms of maintainability, which needs our attention.

In terms of performance, it’s definitely better to use native JS than we did with Vue and React. But now we choose the engineering development, the project will rarely write JS native code, mainly front-end engineering can solve the diversification and complexity of our business, so we will not just consider the performance and ignore the maintenance of the code.

In this article we will talk about CSS optimization. Performance optimization is nothing more than the aforementioned reduction of blocking, file compression, reducing file size and so on. Here we mainly talk about code optimization, a balance choice between performance and maintenance.

Avoid high-performance attributes

Some CSS properties consume more performance than others, and we need to be careful when using them.

box-shadow
border-radiustransformfilter
Copy the code

Filter, in particular, requires a lot of calculation, especially performance.

However, careful use does not mean that it is not used, but we should avoid using this more costly property when we have other options.

Delete the unused CSS

Removing unnecessary CSS will obviously reduce the corresponding file size and speed up page loading.

  1. In our development, we will definitely reuse some code, but some of it is not used, and we need to remove the style code as well as the element.

  2. When we modify the code, we will also delete some code, and the style will also need to be deleted.

  3. In addition, some useless CSS code should be avoided when we write the code. For example, if the border-top is set after the border-top is set, the border-top is invalid and should be avoided.

Reduce code duplication

The biggest element of code maintainability is to minimize the amount of editing to do.

For example, we will choose REM, EM to replace PX. This way we can change the parent element or the root element and change the size of the text, width, height and so on. In some scenarios using percentages, transparency also helps reduce the need for multiple changes when editing code. There’s a lot more to this technique, but if you’re interested, check out the CSS Secrets book.

The use of selectors

Some code will see a lot of nested layers of selector, we all know that the selector is resolved from right to left, so when the CSS selector set layer more complex, will not be conducive to parsing, matching will naturally take more time, changes will become inconvenient.

Although modern browsers are very powerful, we try to standardize our use of code as much as possible, because in addition to performance, we have to consider maintainability.

  1. Try not to nest too many selectors and keep them within three layers.

  2. The ID selector should not be paired with other selectors, such as.con-list#wrap-head.

  3. The same is true for class selectors. Do not match element selectors.

  4. Wildcard selectors are the worst performers and should be avoided if they match all elements.

CSS shorthand

CSS property shorthand must be we are often used, background, font, margin and so on, this can significantly reduce the amount of our code, but in use we also need to consider the shorthand after our code maintenance is convenient, such as our Settings

border-width: 10px 10px 10px 0;
Copy the code

The width is the same except for the width of the left border, which may need to be changed frequently, so it will be changed in 3 places, and the following way

border-width: 10px; border-left-width: 0;Copy the code

It will be easier for us to make frequent changes, and it will be more readable.

The balance between easy to maintain code and low volume of code is not the same, and we developers need to balance the two.

Fair use abbreviations

background: #fff; background-color: #fff;Copy the code

We all know that these two lines of code are not equivalent.

The former is shorthand for setting the background color to white, while the latter shows a single property. When you actually set background-image, the background color is not white, but something like a gradient pattern or image. So using the display notation does not clear background-related attributes, interfering with the effect we are trying to achieve.

Combinations of demonstrative writing and abbreviations are also useful.

background: url(t.png) no-repeat top right / 2em 2em,            url(r.png) no-repeat bottom right / 2em 2em,            url(l.png) no-repeat bottom left / 2em 2em;
Copy the code

It can be seen that background-size and background-repeat are both repeated Settings. Each change requires three changes. If you provide only one value for an attribute, it will spread to every item in the list. Therefore, it can be written as follows:

background: url(t.png) top right, url(r.png) bottom right, url(l.png) bottom left; background-size: 2em 2em; background-repeat: no-repeat;Copy the code

This way we only have to change one place to get what we want.

CSS variable

Css3 provides us with a powerful ability to customize properties, also known as variables. All we need to do is change some of the variables that we have defined in advance.

 var( <custom-variable-name> , <declaration-value>? )
Copy the code

  1. Custom-variable-name: specifies the defined variable. This parameter is mandatory.

  2. Declaration-value: this parameter is optional. This parameter is used when the user-defined variable value does not exist.

Using variables like this, we can easily change the project theme color.

inheritance

CSS has many properties that can be inherited. This feature can save us a lot of code, such as font, line-height, text-align, color, cursor, and so on. These are all properties that can be inherited.

There is also the keyword inherit, which is well known but rarely used. Inherit can be used in any CSS property to inherit the value of the parent element or, in the case of the pseudo-element, the host element that generated the pseudo-element.

This is useful when implementing the small arrows in the prompt box. You can use Inherit to automatically inherit the background and border colors so that you can easily change the colors.

recruitment

Zhejiang Dahua Technology Co., Ltd.- Soft Research – Smart City Product R&D Department Recruitment senior front-end ！！！！！ Welcome everyone to chat, you can send your resume to [email protected], join us, we can progress together, dinner together, travel together, let us from the world village partners into dahua village partners.