Today I will share 12 tips for optimizing CSS code!
Table of contents
1. Avoid high consumption properties
2. Use link instead of @import
5. CSS to achieve special effects and SVG to replace pictures
8. Use hex instead of color names
1. Avoid high consumption properties
Analysis has shown that some CSS properties are slower to render than others and should therefore be used with caution. Includes the following properties:
-
box-shadow
-
border-radius
-
position: fixed
-
transform
-
:nth-child
-
filter
All of the above attributes have relatively high performance requirements. This is not a problem if these attributes are used less frequently. But if a page appears hundreds of times, then the overall CSS may be affected, so use it with caution.
2. Use link instead of @import
The @import rule is mainly used to import resources or CSS files. It prevents other files from downloading in parallel and can cause your website to slow down.
❌ Don't do this in CSS:
@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");
Multiple HTML <link>tags can be used instead of @import, which will load CSS files in parallel, which can improve the loading speed of the application to a certain extent.
✅ You can do this in HTML:
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">
3. Simplify selectors
We know that there are many ways to style HTML elements, and that the most complex CSS selectors can take milliseconds to parse. Reducing the complexity of selectors reduces the load on the browser and keeps the code clean and simple.
❌ Avoid writing like this:
.container > div.links-container ul li .link {
}
✅ It can be written like this:
.container .link {
}
4. Avoid using !Important
At some point, you can use !Important to increase the priority of the style in order for the style to take effect. Do not use !Important unless there is no other way.
Adding !Important CSS declarations will override other corresponding style declarations. If there are too many !Important CSS rules, the browser must perform additional checks on the code, which may slow down the page loading speed. So, try to avoid using !Important. In many cases, we can achieve style rewriting through selectors, unless we want to rewrite the CSS of a third-party library.
5. CSS to achieve special effects and SVG to replace pictures
Images can take a long time to load on a page, especially if the images are not optimized for the web. When implementing background images, gradients, and geometric figures, use CSS codes instead of using pictures as much as possible. Using CSS code will load faster than images.
You can also use SVG instead of PNG or JPG images:
-
You can add effects to pictures;
-
Images load faster;
-
The image automatically adapts to the user's screen.
6. Minify CSS
We can reduce the file size by compressing the CSS file to remove all white space and unnecessary code in the file. The smaller the CSS file, the less time it takes to load, and the faster the page loads.
7. Use 0 instead of 0px
When a property has a value of 0, we can add no units. That is, don't write like this: 0rem, 0em, 0px, etc.
Of course, there is nothing wrong with writing this way, but these units are useless, and when dealing with a huge CSS file, the file will be smaller without units than with them.
8. Use hex instead of color names
When we set the color as a color name, the browser spends more time figuring out the hex value of the color. If you want to use red, after setting color:red, the display effect of different browsers may be different. As a developer, we cannot let the browser decide how the web page will be displayed.
Therefore, by defining colors in hexadecimal (e.g. red #ff0000 ) as much as possible, you can ensure that all browsers display exactly the desired color with the same hue.
9. Avoid too much font-family
Defining the font for each selector is not a good way, it will make the code difficult to maintain, if you want to change the font in the future, you have to change it in each selector.
So instead of defining fonts like this:
h1 {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-family: Arial, Helvetica, sans-serif;
}
.selection {
font-family: Arial, Helvetica, sans-serif;
}
.footer {
font-family: "Times New Roman", Times, serif;
}
You can define the font to use in the body, and if you want to override that font in other selectors, you can do so by using the desired font in that selector:
body{
font-family: Arial, Helvetica, sans-serif;
}
footer{
font-family: "Times New Roman", Times, serif";
}
If the fonts of many parts of the page are different, you can define the fonts in a class, and then use this class on the required HTML tags:
.font-helvetica {
font-family: Arial, Helvetica, sans-serif;
}
.font-times {
font-family: "Times New Roman", Times, serif";
}
10. Use alternate fonts
In some cases, fonts used in your app may not be available on the user's device. In this case, another fallback font can be specified:
p{
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
In this way, the browser will parse in order until the first available font is parsed, and if none are available, the browser's default font will be used.
11. Reset with CSS
Each browser has its own default styles for HTML elements. If there is an H1 element without any style, then by default, in Firefox, it will be given a margin value of 21.433px from top to bottom, and 0 from left to right. In Safari, it will be given a margin value of 21px up and down, and 0 left and right.
Therefore, to reset CSS styles, a good practice is to define styles from scratch. Many developers will use the universal selector (*) to perform a basic reset:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Resetting with a universal selector (*) can sometimes cause performance issues because it sets the style on a per-label basis.
The code base can be reset with some common CSS like normalize. You can also refer to some best practices for CSS resets.
12. Reduce duplicate code
When two elements or selectors have the same CSS property, you can use commas to combine the selectors instead of declaring styles repeatedly, and they will share the CSS style.
❌ Avoid writing like this:
.header {
background-color: #fefefe;
padding: 20px 0;
}
.footer {
background-color: #fefefe;
padding: 20px 0;
}
✅ It is recommended to write like this:
.header,
.footer {
background-color: #fefefe;
padding: 20px 0;
}