Selector
Always keep the CSS selector short and efficient.
Selectors positioned by page element location are not ideal. A selector such as .sidebar h3 span{} is positioning too dependent on relative positions, making it difficult to maintain its style when moving the span outside h3 and sidebar.
Complexly structured selectors can affect performance. The more complex the selector structure (e.g. .sidebar h3 span is three layers,.content ul p a is four layers), the greater the browser’s overhead.
Try to keep the style from relying on its positioning, and try to keep the selector simple and clear.
As a whole, the selector should be as short as possible (for example, only one layer of structure), but class names should not be too brief, for example, .user-avatar is much better than .usr-avt
Keep in mind that class doesn’t matter whether it’s semantic; Don’t emphasize that class names are semantically appropriate, but instead focus on using names that are reasonable and not out of date.
Over-decorated selectors
As mentioned earlier, over-decorated selectors are not ideal.
Over-decorated selectors refer to things like div.promo It’s likely that you’ll get the same effect with .promo Of course, you may occasionally need to decorate class with element types (for example, you wrote a .error and wanted it to look different in different element types, such as .error { color: red; } div.error { padding: 14px; } . . 14px; ), but most of the time, you should try to avoid it.
Another example of an over-decorated selector,ul.nav li a{} As mentioned earlier, we can delete ul right away because we know .nav is a list, and then we can find that a must be in li so we can rewrite this selector to .nav a{}
> Free code learning website 2020
Selector performance
Despite the increasing browser performance and the faster the rendering of CSS, you should be concerned about efficiency. Avoid the increasingly complex CSS3 new selectors with a short, nested selector and without using a global selector as a core selector.* {}
Core Selector: The browser parses the selector in right-to-left order, and the right-most element is the element in which the style takes effect, and is the core selector.