Performance of web page

Question

In CSS using the all selector is not adviced, i.e * { box-sizing: border-box} or transition: all 2s ease-in. What can be done to have same result but with improved performance !?

Answer 1

use classes , id's or other selectors instead of universal selector * when style rule don't need to affect all elements.

also using child selector is faster than descedant selectors.
div span{
/*style rules*/
}
👆 this applies to all span tags within div.
div>span{
/*style rules*/
}
this applies to only *direct childs* not descedant (grandchilds,grand grandchilds?! like that. ) and is faster than descedant selector.

about transition:

specify only required property.
if you want to have a transition effect for only background-color of element use background-color instead of using all.

.myClass{
transition:background-color 2s ease-in;
}

I hope others will also post some useful tips. 👌