1. What are the ways to optimize CSS and improve performance?
- Multiple css can be combined and minimize http requests
- When the attribute value is 0, no unit is added (margin: 0)
- Put the css file on the top of the page (CSS will block rendering, and the browser will not render any processed content until the CSS file request, download, and parsing are completed. If it is placed below, when the html structure is rendered, parse css, it will be re-rendered again, causing the page to flicker)
- Avoid descendant selectors and avoid chain selectors that are too long
- Use compact syntax ( margin: 8px 6px 7px 5px; )
- Use semantic naming for easy maintenance (belongs to optimization)
- Use !impotrant as little as possible, you can choose other selectors
- Follow the box model rules
Trick : Merge shorthand shortener chains, semantics obey box model