I'm asking you a question about the application and speed of style sheets. I'm so curious

If you understand and talk about CSS priority as follows. The theorem below is an easy-to-understand summary, and you can find out the principle by checking CSS priority .

First, the priority depends on the selector or !important declaration. I understand that the score in brackets is a priority point.

!important 〉 #id {100} 〉 .class {10} 〉 tag {1} 〉 * {0}

In addition, detailed selectors have a high priority.

.tree.apple { color:blue;} /* priority ↓ */
.tree.fruit.apple { color:red;} /* priority ↑ */

In addition, the properties declared later are of high priority.

.apple {
    color: blue; /* priority ↓ */
    color: red; /* priority ↑ */
}

For more accurate priority information, see CSS priority.

First of all, the order of properties does not significantly affect performance. (At least as far as I know.) In many cases, the reason why we make the order of properties uniform is that we can collaborate more efficiently in terms of code readability.

However, other than the order, when using animation through css, it greatly affects performance. If you search on Google , it is highly recommended that you avoid elements that do Reflow or Repaint or use JS properly. They also say that performance can be improved by eliminating unnecessary use of selectors. It's like this.

/* BAD */
.nav-global .nav-item .nav-link .ic-home {
    fill: black;
}

/* /* GOOD */
.nav-global .ic-home {
    fill: black;
}